livebook-dev
Modal buttons have inconsistent behavior with tab + enter/space
Environment
- Elixir & Erlang/OTP versions: Elixir 1.14.0, Erlang/OTP 25
- Operating system: WSL/Ubuntu 18.04
- How have you started Livebook: mix phx.server
- Livebook version: 9600a3d3a38b4f20f47af3e7595b712bc5e6ba7f (main)
- Browsers that reproduce this bug: Firefox/Chrome on Windows
Current behavior
After opening a modal, tabbing to a button and pressing enter or space will close the modal. If you interact with the modal once (clicking) beforehand, it works
Expected behavior
Pressing enter/space should work every time
Removing the phx-click-away event will prevent the modal from being closed, but the first enter/space press still doesn't work. I don't know what the underlying issue is yet, but I'd be happy to try to find a solution later
LiveView v0.18 has a .focus_wrap function component which we can probably use around our modals too.
We will definitely use focus wrap, but currently the focus already moves to modal when opened, but tabbing into a specific button and hitting enter does close the modal :thinking:
I have reproduce this only with LiveView. It is likely a phx-click-away bug.
The issue is that when we open a modal with a click, LV takes a note of which element was clicked, then when we hit enter on a button, we trigger mouseless click and phx-click-away is dispatched based on the previous element.
This has actually been fixed in https://github.com/phoenixframework/phoenix_live_view/commit/37a20e234360a493d914889191c2fee0090e4fcf, so we need to wait for a new LV version and we are good!