DialogTrigger Popover Regains Focus Unexpectedly #4625
Replies: 1 comment
-
I don't know anything about react-hotkeys-hook, but I think I can explain the behavior you're seeing anyways. When you click on a dialog trigger, that button becomes focused. When the click finishes, the dialog opens and focus is moved inside the dialog. When you click off the dialog to close it, focus is moved back to the trigger. At this point the focus is invisible because you're using your mouse. Once you press a key, the current modality we detect changes from mouse to keyboard. This makes the focus visible so you know what element you're interacting with. One of the reasons we handle this focus movement and tracking is so that keyboard users and assistive technology users do not get sent back to the beginning of the application whenever a dialog is closed. Instead, they are placed back into whatever they were interacting with before the dialog opened. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Description:
I'm working with the DialogTrigger Popover and custom keyboard controls, which are implemented using the react-hotkeys-hook library.
Steps to Reproduce:
Observed Behavior:
Post these steps; an unexpected behavior is observed where a blue highlighting box appears around the ActionButton. The problem is that the element regains focus after clicking away, which should not happen.
Here is the code snippet I am using:
I'm seeking guidance on why this focus issue occurs and how it could be resolved.
Beta Was this translation helpful? Give feedback.
All reactions