Topic: Multiselected optgroup
movework premium asked 5 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 5 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 5 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 5 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