Skip to content

Popover (Vue): support disabling trigger focus restoration on close #3849

@ignatremizov

Description

@ignatremizov

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions