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:
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:
PopoverCurrent 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: