material-ui
material-ui copied to clipboard
[material-ui][Autocomplete] Shouldn't close popper if disableCloseOnSelect and the click is within the popper/paper
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/autocomplete-dontcloseonselect-hlj9mp
Steps:
- Open dropdown
- Click outside of the
ulbut within the Popper or within the Paper.
Current behavior
The popper closes.
Expected behavior
The popper shouldn't close.
Context
Check this real life example: https://codesandbox.io/p/sandbox/autocomplete-multiple-popper-7w9tn6?file=%2Fsrc%2FAutocompleteMultiCustom.tsx%3A23%2C11-23%2C31
Not closing on Paper/Popper click would allow to easily implement things like SelectAll / DeselectAll and other stuff. In this example clicking on Select All closes the popper and doesn't even trigger SelectAll button click.
I'm not clear how the disableCloseOnSelect is implemented, but seems that it does not close the popper when the click is within the ul element. Because even though I customize ListboxComponent it still closes the popper.
(Alternatively another props can be added: disableCloseOnClickWithinPopper, disableCloseOnClickWithinPaper)
Your environment
No response
Search keywords: autocomplete disableCloseOnSelect popper close
Might be related to https://github.com/mui/material-ui/issues/36619 I mean, this might be "expected behavior" but it is more natural to have this disableClose on Popper component.
Check this real life example: https://codesandbox.io/p/sandbox/autocomplete-multiple-popper-7w9tn6?file=%2Fsrc%2FAutocompleteMultiCustom.tsx%3A23%2C11-23%2C31
I can't access the provided CodeSandbox link. It says I don't have permission to view it.
Regarding the disableCloseOnSelect prop, its name and description
If `true`, the popup won't close when a value is selected.
clearly indicate that it prevents the popup from closing when a value is selected. I'm not sure why you expect the Autocomplete to remain open when clicking outside the options but within the popper.
I made adjustments to the provided CodeSandbox in #36619. Using slotProps to prevent default click to the Typography label enables checkbox selection without closing the menu. However, you lose the feature of toggling the checkbox by clicking the label. You can find the updated version here: link to updated CodeSandbox.
@ZeeshanTamboli Well, if you click on the scrollbar you don't select the value but the popup still stays open. Also valid for anywhere within the ul but outside of the value.
I made the sandbox public now https://codesandbox.io/p/sandbox/autocomplete-multiple-popper-7w9tn6?file=%2Fsrc%2FAutocompleteMultiCustom.tsx%3A16%2C17
Can we then add disableCloseOnPaperClick feature, or something?
Can we then add
disableCloseOnPaperClickfeature, or something?
Not sure if it would be useful, but I'll reopen the issue and add the "waiting for upvotes" label to see how many are interested in this feature. It will us prioritize and know that it is useful in real-world scenarios. I won't consider this as a bug though.