I am using the Select component from MUI with the 'multiple' option: Select Component
Context:
- With the single option, the popover closes automatically when the user makes a selection.
- With the multiple option, the modal popover stays open so that the user can select multiple options.
However I'd like the popover to automatically close as soon as the mouse leaves the popover. Otherwise if the user tries to click somewhere else in the UI, it feels unresponsive because the modal popover was still opened. It just closes the popover. The user then needs to click a second time to access the rest of the UI.
Code Sandbox
Closing the popover using onMouseLeave in MenuProps works fine but the problem is that it often takes several clicks to open the popover. You can see in the console that an onMouseLeave event is often fired immediately after it was meant to open.
Any help much appreciated