[Autocomplete] Checkbox label inside paper component is causing blur when clicked

[trronaldbasco]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/tender-tree-xzql42?file=/demo.js

Current behavior 😯

I have two elements inside the paper component aside from the options, one is a button and another one is a checkbox. To prevent the autocomplete from triggering blur when the user interacts with these elements, I've called event.preventDefault() on event onMouseDown. Each element is clickable and would not trigger blur but unfortunately, clicking the label of the checkbox causes it to blur.

Expected behavior 🤔

Clicking the checkbox label would just toggle the checkbox checked state and the blur method should not be called.

Context 🔦

What I'm trying to accomplish is I have two sets of options and when I tick the checkbox it would display another set of options. Clicking on whether the checkbox or label should not trigger the blur.

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[mj12albert]

@trronaldbasco This is the expected behavior for the Paper component inside Autocomplete. To achieve your design, you could try customizing the Listbox component instead, it should automatically handle these events.

Here's a working sandbox: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-36619-1fofhq?file=/demo.js

PS - here's some specific docs about customizing the Autocomplete's inner Listbox: https://mui.com/material-ui/react-autocomplete/#listboxcomponent

[trronaldbasco]

@mj12albert that looks good. I did not try the Listbox knowing that it's the unordered list component and putting other elements inside that aside from li is not semantic, but, that would work.

It is still happening. Try clicking the checkbox label.

[mj12albert]

@trronaldbasco You are right that it breaks the semantics - replacing the Listbox with a div, and then putting a ul around {props.children} could take care of that though. (It's not particularly more convenient than manually handling mouseDown on the Paper)

It is still happening. Try clicking the checkbox label.

It could be an issue related to the checkbox itself, I will have a look and may open a separate issue

[trronaldbasco]

@mj12albert was there any update on the checkbox side?