Is there way to select all items in multiple select with one click?
Hi @janambroz,
Could you share which UI Module you are working with? Additionally, my understanding is that you are looking to have a “Select all” option which ticks all boxes, is that correct?
Hi @heinzen,
I am using Custom UI. Yes I would like to have a option “Select All” which will check all boxes.
Thank you
If using Custom UI, then you are just talking about standard ReactJS.
With vanilla ReactJS <select>, you can just do something like this:
const [multiSelect, setMultiSelect] = useState([]);
const [showSelectAll, setShowSelectAll] = useState(true);
const SelectChanged = (evt) => {
let result = [];
let opt = evt.target.options;
for (let i = 0; i < opt.length; i++) {
console.log("Option", i, opt[i].value, opt[i].selected);
}
let selectAll = opt[1].selected;
let deselectAll = opt[0].selected;
if (selectAll) {
console.log("selectAll");
for (let i = 2; i < opt.length; i++) {
result.push(opt[i].value);
}
setShowSelectAll(false);
} else if (deselectAll) {
console.log("deselectAll");
setShowSelectAll(true);
} else {
console.log("select some");
for (let i = 2; i < opt.length; i++) {
if (opt[i].selected) {
if (opt[i].value == 0) {
selectAll = true;
break;
}
result.push(opt[i].value);
}
setShowSelectAll(result.length < opt.length - 2);
}
}
console.log("result", JSON.stringify(result));
setMultiSelect(result);
}
const style = {
height: '200px'
};
const App= () => {
return (
<Content>
<select name="selectTest" multiple={true} onChange={SelectChanged.bind(this)} value={multiSelect} style={style}>
<option hidden={showSelectAll} value={-1}>Deselect All</option>
<option hidden={!showSelectAll} value={0}>Select All</option>
{(() => {
let options = [];
for (let i = 1; i <= 10; i++) {
options.push(<option key={i} value={i}>Option {i}</option>);
}
return options;
})()}
</select>
<br/>
Selected: <TextField value={JSON.stringify(multiSelect)} />
</Content>
);
}
Screenshot:
You should also check out react-select-2 for the better features.
@KCWong thank you that is very helpful!
Do you think I can apply this on Select from atlaskit?
Thank you
https://atlassian.design/components/select/code
It has onChange and other events, so I don’t see why not.