Description:
When interacting with the component via a touch device (or touch simulation), tapping the backdrop causes a click event to fire on the element positioned directly beneath it in the DOM/z-index stack. This "ghost click" causes unintended actions on the background UI when the user is trying to tap the backdrop to close the dialog. This occurs when the dialog is configured with closedby="any".
Steps to Reproduce:
- Render a clickable element (e.g., a
<button> or <a> tag) on the page.
- Open a
<dialog> component configured with closedby="any".
- Using a touchscreen device or browser dev tools touch emulator, tap the backdrop directly over the underlying element.
- Observe that the dialog closes, but the touch/click event propagates through, triggering the underlying element's action.
Expected Behavior:
The dialog's backdrop should completely consume the touch interaction to close the dialog. Tapping the backdrop should not trigger interactions on elements visually hidden behind it, regardless of the browser engine.
Actual Behavior:
The touch event bleeds through the backdrop, triggering an unintended click on the underlying element on WebKit and Firefox.
Environment:
- Oat version: 0.4.0
- Browsers exhibiting the bug:
- Firefox Desktop (Dev Tools touch simulation)
- Chrome Desktop (Dev Tools touch simulation)
- Firefox Android
- WebKit Android
- Browsers working as expected:
My 2 Cents:
As Chrome Android works as expected, this is more likely a browser issue, but we still need to address this as users won't expect this behavior.
Description:
When interacting with the component via a touch device (or touch simulation), tapping the backdrop causes a click event to fire on the element positioned directly beneath it in the DOM/z-index stack. This "ghost click" causes unintended actions on the background UI when the user is trying to tap the backdrop to close the dialog. This occurs when the dialog is configured with closedby="any".
Steps to Reproduce:
<button>or<a>tag) on the page.<dialog>component configured withclosedby="any".Expected Behavior:
The dialog's backdrop should completely consume the touch interaction to close the dialog. Tapping the backdrop should not trigger interactions on elements visually hidden behind it, regardless of the browser engine.
Actual Behavior:
The touch event bleeds through the backdrop, triggering an unintended click on the underlying element on WebKit and Firefox.
Environment:
My 2 Cents:
As Chrome Android works as expected, this is more likely a browser issue, but we still need to address this as users won't expect this behavior.