Topic: Multiselected optgroup
                  
                  movework
                  premium
                  asked 6 years ago
                
Hi,
I have problem with optgroup in multiselect. I use Alternative version with option param and the result is different from the documentation. The optgroup label has a disabled checkbox before like a basic option
This is my option param :
[{disabled: true, icon: null, text: "First optgroup"}, {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"}, {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"}]
Expected behavior
< li class="optgroup">...< /li> // For optgroup without checkbox
Actual behavior
< li data-multiple="true" class="disabled">...< /li> // With checkbox in content
Resources (screenshots, code snippets etc.)
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
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.
                      
                      movework
                      premium
                        answered 6 years ago
                    
Hi,
I still have the same problem while I just spent on your version 4.15.0 mdbreact, is this normal?
Best regards,
Patrick
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
 - Premium support: Yes
 - Technology: MDB React
 - MDB Version: 4.11.0
 - Device: -
 - Browser: Chrome 72.0
 - OS: -
 - Provided sample code: No
 - Provided link: No