I want to implement two buttons Select All and Select None inside Autocomplete React Material UI along with checkbox for each option.When Select All button is clicked all the options must be checked and when I click Select None all the options must be unchecked. How do I implement that ?
<Autocomplete id={id } size={size} multiple={multiple} value={value} disabled={disabled} options={items} onChange={handleChange} getOptionLabel={option => option.label} renderOption={(option, { selected }) => ( <React.Fragment > {isCheckBox(check, selected)} {option.label} </React.Fragment> )} renderInput={params => ( <TextField {...params} label="controlled" variant={variant} label={label} placeholder={placeholder} /> )} />
export function isCheckBox(check, selected) { if (check) { const CheckBox = <Checkbox icon={icon} checkedIcon={checkedIcon} checked={selected} /> return CheckBox; } return null;
}2 Answers
I stumbled into the same issue earlier today. The trick is to use local state to manage what has been selected, and change the renderOption to select * checkboxes if the local state has the 'all' key in it.
NB: At the time of writing React 16 is what I'm working with I'm on a deadline, so I'll leave a codesandbox solution for you instead of a rushed explanation. Hope it helps :Select All AutoComplete Sandbox
Updated
for React version 16.13.1 and later. codesandbox
const [open, setOpen] = useState(false);
const timer = useRef(-1);
const setOpenByTimer = (isOpen) => { clearTimeout(timer.current); timer.current = window.setTimeout(() => { setOpen(isOpen); }, 200);
}
const MyPopper = function (props) { const addAllClick = (e) => { clearTimeout(timer.current); console.log('Add All'); } const clearClick = (e) => { clearTimeout(timer.current); console.log('Clear'); } return ( <Popper {...props}> <ButtonGroup color="primary" aria-label="outlined primary button group"> <Button color="primary" onClick={addAllClick}> Add All </Button> <Button color="primary" onClick={clearClick}> Clear </Button> </ButtonGroup> {props.children} </Popper> );
};
return ( <Autocomplete PopperComponent={MyPopper} onOpen={(e) => { console.log('onOpen'); setOpenByTimer(true); }} onClose={(obj,reason) => { console.log('onClose', reason); setOpenByTimer(false); }} open={open} ..... .... />
);Old Answer
Just customise PopperComponent and do whatever you want.
const addAllClick = (e: any) => { setValue(items);
};
const clearClick = (e: any) => { setValue([]);
};
const MyPopper = function (props: any) { return ( <Popper {...props}> <ButtonGroup color="primary" aria-label="outlined primary button group"> <Button color="primary" onClick={addAllClick}> Add All </Button> <Button color="primary" onClick={clearClick}> Clear </Button> </ButtonGroup> {props.children} </Popper> );
};
<Autocomplete PopperComponent={MyPopper} ...
/>
