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

Duplicates

• I have searched the existing issues

Latest version

• 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 🌎

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