material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[material-ui][Autocomplete] Shouldn't close popper if disableCloseOnSelect and the click is within the popper/paper

Open croraf opened this issue 1 year ago • 4 comments

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/autocomplete-dontcloseonselect-hlj9mp

Steps:

  1. Open dropdown
  2. Click outside of the ul but 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

croraf avatar Feb 06 '24 17:02 croraf

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.

croraf avatar Feb 07 '24 14:02 croraf

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 avatar Feb 13 '24 14:02 ZeeshanTamboli

@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?

croraf avatar Feb 14 '24 09:02 croraf

Can we then add disableCloseOnPaperClick feature, 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.

ZeeshanTamboli avatar Feb 14 '24 12:02 ZeeshanTamboli