MUI Autocomplete with Select All

Question

I'm using Material UI (5) and the Autocomplete component with multiselect option enabled. I'm also using the "checkbox" customization found in MUI documentation. I'm trying to do a small improvement to be able to "Check/Uncheck All" options. To do that, I'm using PopperComponent property.

Follow the Code Sandbox example : https://codesandbox.io/s/checkboxestags-material-demo-forked-5b0pt

However, I've got 2 problems that I don't know how to solve:

• When I click on Select All -> Click outside the component -> Click again in the component -> Try to click on Select All. Notice that the popup/menu closes... It's like if ClickAwayListener intercepts a click outside the component, but it's not true;
• Click in the component -> Scroll Down -> Select an Option -> Notice that the scroll up to the top. It should stay in the same position.

Answer 1

Because you're using ClickAwayListener, So it considered that 'Select all' Checkbox is out of it.

You can prevent that by adding onMouseDown event:

<Checkbox
    checked={checkAll}
    onChange={checkAllChange}
    id="check-all"
    sx={{ marginRight: "8px" }}
    onMouseDown={(e) => e.preventDefault()}   // <== add this 
/>