Select all and Select None buttons in Autocomplete Material UI React

Question

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 id="dropdown_input"
          {...params} label="controlled" variant={variant} label={label} placeholder={placeholder} />
      )}
    />
export function isCheckBox(check, selected) { 
  if (check) {
    const CheckBox = <Checkbox
      id="dropdown_check"
      icon={icon}
      checkedIcon={checkedIcon}
      checked={selected}
    />
    return CheckBox;
  }
  return null;
}

Answer 1

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

Answer 2

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.

Autocomplete API

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}
    ...  
/>