Material UI v5: Autocomplete disableCloseOnSelect does not work with FormControlLabel

Question

I am trying to create a wrapper around the Autocomplete component from MUI

Here's my codesandbox link: https://codesandbox.io/s/typescript-material-ui-textfield-forked-j9xm3?file=/src/App.tsx:0-3149

For demo purposes I have simplified the API by a lot.

I'm trying to create my own multi Select component, with this kind of API:

const Select = React.forwardRef(
  ({ children: c, onChange, value = [] }: SelectProps, ref) => {
    ...

    const renderCheckbox = (props: any, option_component: any, value: any) => {
      return (
        <li>
          <Checkbox checked={value.selected} {...props}>
            {childrenToText(option_component.props.children)}
          </Checkbox>
        </li>
      );
    };

    return (
      <MuiAutocomplete
        // open={true}
        ...
        renderOption={renderCheckbox}
      />
    );
  }
);




const App = () => {
  const [choices, setChoices] = useState([]);
  return (
    <Select
      label="Favorite countries"
      value={choices}
      onChange={(newChoices: Array<string>) => setChoices(newChoices)}
    >
      <Option key="1" value="1" subheader={"Hot dogs"}>
        United States
      </Option>
      <Option key="2" value="2" subheader={"Maple syrup"}>
        Canada
      </Option>
      <Option key="3" value="3" subheader={"Tacos"}>
        Mexico
      </Option>
    </Select>
  );
};

In order to achieve this, I have to do some fancy stuff with children and rendering my own custom component

I am having trouble getting MUI's autocomplete component to work with MUI's FormControlLabel and Checkbox components.

This snippet works ONLY when I manually set open={true} on MuiAutocomplete (line 66 in my codesandbox).

const Checkbox = ({ children, checked, ...rest }: any) => {
  return (
    <FormControlLabel
      {...rest}
      value={checked}
      control={<MuiCheckbox checked={checked} />}
      label={children}
    />
  );
};

However, when I comment out open={true}, it does not behave the same way.

A few issues:

1. The dropdown closes when I click the label even though I set disableCloseOnSelect={true}
2. I have to set both value={checked} on FormControlLabel and checked={checked} on MuiCheckbox, this feels redundant

Answer 1

I ran into a similar issue in MaterialUI v4, which varies slightly from v5 in that the renderOption prop in v4 allows you to customize the content within the Autocomplete dropdown options' <li> elements, whereas in v5 they appear to give you control over the entire dropdown option's contents.

In v4, I used the renderOption prop to render my options similar to your case, with a Checkbox and label. I observed that clicking the label directly resulted in the dropdown closing, whereas clicking on the checkbox or the <li> element did not. The solution for me was to add a event.preventDefault() click handler to the label, which prevented the Autocomplete input from blurring, but still allowed the event to propagate up the tree to update the selected values.

Your scenario is similar, I found that adding onClick={(e) => e.preventDefault() to the <li> in renderCheckbox solves the problem.

const renderCheckbox = (props: any, option_component: any, value: any) => {
  return (
    <li onClick={(e) => e.preventDefault()}>
      <Checkbox checked={value.selected} {...props}>
        {childrenToText(option_component.props.children)}
      </Checkbox>
    </li>
  );
};

https://codesandbox.io/s/typescript-material-ui-textfield-forked-rzmw5h?file=/src/App.tsx:993-1033