-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
v1.7.23
What browser are you using?
Chrome and Firefox
Reproduction URL
https://github.com/ignatremizov/headlessui-vue-popover-restore-focus-repro
Describe your issue
I need this UX pattern:
- Clicking a text input opens a
Popover - Popover stays open while typing in the input
- Clicking inside popover should not force-close
- Clicking outside should close popover and keep input unfocused
Current behavior restores focus to the popover trigger/input after close (especially on outside click), and there is no supported opt-out for Popover in Vue.
In more complex UI flows this causes focus ping-pong (blur -> focus -> blur) and visible flicker when trying to keep focus away from the input after outside close.
The minimal repro above demonstrates that outside click closes popover and then focus returns to the input.
Would you consider adding a supported Popover option to disable restore-focus (for example restoreFocus={false} semantics), or an equivalent close API option (e.g. close({ restoreFocus: false })) in Vue?
Possibly related threads:
- Cannot focus out of popover within modal #3002
- Popover does not close when clicking anywhere outside of its contents #3611
- Unexpected keyboard focus behaviour on Popover with portalled panel #1839
- Transition breaks Popover Panel focus management #2186
- Dialog is not returning focus after updating to vue 3.5 #3686
- Fix Restoring Focus in Dialog (#3686) #3687