search

jwstegemann / fritz2

Easily build reactive web-apps in Kotlin based on flows and coroutines.
https://www.fritz2.dev
MIT License
627 stars 25 forks source link

Fix nested listbox selection behavior #851

Closed henryB99 closed 5 months ago

henryB99 commented 5 months ago

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 the target to the actual element I clicked on, on Windows it sets the target 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 to click. This way, the event listener registered by the closeOnDismiss() method does not run, because the event gets correctly cancelled by the listbox item. Before, the listbox item only cancelled the mousedown event triggered by the click, but not the click 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-HTMLButtonElements behave identical to actual HTMLButtonElements.

Lysander commented 5 months ago

Have you tested this also with touchpads? It might be that the mousedown has been intentionally used to support the latter.

henryB99 commented 5 months ago

MDN says that click is triggerd by touch devices. Also, the spec says that using click is encouraged over other mouse events such as mousedown for implementing custom ui elements so I think we are safe here.