Fix nested listbox selection behavior #851
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR fixes a problem where a popover would close when selecting a listbox item from a nested listbox.
When selecting an item from a nested listbox, the click event's
target
property differs depending on the OS the browser is running on. While the browser on MacOS sets thetarget
to the actual element I clicked on, on Windows it sets thetarget
to another element (in my case this was the portal root element).This behavior seems to be browser-independent, but I only tested this for Edge and Safari on MacOS and Edge and Chrome on Windows.
This PR avoids this problem altogether by changing the event the listbox item listens to from
mousedown
toclick
. This way, the event listener registered by thecloseOnDismiss()
method does not run, because the event gets correctly cancelled by the listbox item. Before, the listbox item only cancelled themousedown
event triggered by the click, but not theclick
event.The tests are passing on both MacOS and Windows.
This PR also adds an event listener to elements using
OpenClose
functionality, so that non-HTMLButtonElement
s behave identical to actualHTMLButtonElement
s.