react-select add all items from group by click on group title - reactjs

Question

react-select
let options = [
{
"label": "Group 1",
"options": [
{
"label": "Item1", "value": "1|1"
},
{
"label": "Item2", "value": "1|2"
},
{
"label": "Item3", "value": "1|3"
}
]
},
{
"label": "Group n",
"options": [
{
"label": "Item1", "value": "2|1"
},
{
"label": "Item2", "value": "2|2"
}
]
}
];
<Select
onChange={this.onChange}
closeMenuOnSelect={false}
isMulti
menuIsOpen={true}
options={options}
/>
onChange is fired only for subitems of Group, in documentation I don't find property to set group title clickable or other options that would accomplish this, any ideas?
I also tried to add value for groups like this
[
{
"label": "Group 1",
"value": [
"1|1",
"1|2",
"1|3"
],
"options": [
{
"label": "item1",
"value": "1|1"
},
{
"label": "item2",
"value": "1|2"
},
{
"label": "item3",
"value": "1|3"
}
]
}
]
But group is not clickable

Answer 1

Yes, that's how react-select works, you can't directly be able to click/select on the group.
However, In order to make the group clickable, provide a label and value in an object inside options array.
Like this
let options = [
{
label: "---GROUP 1---",
value: "1"
},
{
options: [
{
label: "Item1",
value: "1|1"
...
This will make the group clickable and selectable.
Working copy of your code is in the codesandbox
Another info which might be useful to know is:
You can write custom component for the group. This way you can attach onClick or do or other kinds of stuff.
<Select
components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
onChange={onChange}
====EDIT: Based on request in the comment:====
In order to select all group items upon clicking on group label, do the following:
maintain a state value for example
write a little custom component for the group label and attach an onClick which will concatenate the value(state)
use value prop of react-select and provide the value from state
write custom onChange and update the state i.e. value upon item select
I have updated the codesandbox working copy of code (same link as above)
Code Snippet:
const group1Options = [
{
label: "Item1",
value: "1|1"
},
{
label: "Item2",
value: "1|2"
},
{
label: "Item3",
value: "1|3"
}
];
const group2Options = [
{
label: "Item1",
value: "2|1"
},
{
label: "Item2",
value: "2|2"
}
];
const createGroup = (groupName, options, setValue) => {
return {
label: (() => {
return (
<div
onClick={() =>
setValue(value =>
value.concat(options.filter(grpOpt => !value.includes(grpOpt)))
)
}
>
{groupName}
</div>
);
})(),
options: options
};
};
export default function App() {
const [value, setValue] = useState([]);
let options = [
createGroup("---GROUP 1---", group1Options, setValue),
createGroup("---GROUP 2---", group2Options, setValue)
];
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Select
// components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
onChange={option => {
console.log(option);
return setValue(option);
}}
closeMenuOnSelect={false}
isMulti
menuIsOpen={true}
options={options}
value={value}
/>
</div>
);
}