Multiselected optgroup

Hello,

Thank you for reaching out.

This issue was already fixed and the fixed version will be available in our upcoming release.

Best regards,

Aliaksandr from MDB.

Hi,

I still have the same problem while I just spent on your version 4.15.0 mdbreact, is this normal?

Best regards,

Patrick

Hi,

For add optgroup class to one of your options you should set a property separator to true. For example, I took your code and made a simple app:

import React, { Component } from "react";
import { MDBSelect } from "mdbreact";

class App extends Component {
  state = {
    options: [
      { disabled: true, icon: null, text: "First optgroup", separator: true },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Contrôle gourvernante requis",
        value: "113#NEW#1"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Bloqué",
        value: "114#NEW#2"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Chambre disponible",
        value: "118#CLOSED#1"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Archivé",
        value: "150#CLOSED#2"
      },
      { disabled: true, icon: null, text: "Second optgroup", separator: true },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Contrôle gouvernante requis",
        value: "142#NEW#1"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Intervention requise",
        value: "162#NEW#2"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Occupé",
        value: "143#SUPPORTED#1"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Libre",
        value: "146#CLOSED#1"
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        text: "Archivé",
        value: "160#CLOSED#2"
      }
    ]
  };

  render() {
    return (
      <div>
        <MDBSelect
          multiple
          options={this.state.options}
          selected=""
          label="Example label"
        />
      </div>
    );
  }
}

export default App;

So your option should look the next way:

{ disabled: true, icon: null, text: "First optgroup", separator: true },

Hope I could help.

Best regards.