The question that I am about to make has been made in the following link:
Multi-Category Dropdown using react-select but is yet to be answered.
I am using react-select to implement a Dropdown menu with multiple selection and multiple option groups and I am trying to limit the selection to one item from each group. At the moment I have implemented the multiple group and multiple selection part of the dropdown. Here is my code for the dropdown data:
const groupByFieldOptions = [
{ key: "1", value: "imsi/iccid", label: "IMSI/ICCID", optgroup: "Field" },
{ key: "2", value: "plmn", label: "PLMN", optgroup: "Field" },
{ key: "3", value: "service", label: "Service", optgroup: "Field" },
{ key: "4", value: "customer", label: "Customer", optgroup: "Field" },
{ key: "5", value: "all", label: "All", optgroup: "Field" },
];
const groupByPeriodOptions = [
{ key: "1", value: "day", label: "Day" },
{ key: "2", value: "month", label: "Month" },
{ key: "3", value: "year", label: "Year" },
];
const groupOptions = [
{
label: "Field",
options: groupByFieldOptions,
},
{
label: "Period",
options: groupByPeriodOptions,
},
];
and here is the part of my code for the dropdown menu with react-select:
<Select
className="react-select-container"
classNamePrefix="react-select"
isMulti
options={groupOptions}
closeMenuOnSelect={false}
/>
Could anyone let me know how I can implement this functionality?