Skip to content

[Popover] Could we switch off initialFocus? #1679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sebinsua opened this issue Apr 7, 2025 · 2 comments
Open

[Popover] Could we switch off initialFocus? #1679

sebinsua opened this issue Apr 7, 2025 · 2 comments
Labels
component: popover This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature has workaround

Comments

@sebinsua
Copy link
Contributor

sebinsua commented Apr 7, 2025

Feature request

Summary

I've noticed that Popover has an initialFocus prop that can take a ref or function returning a ref. By default it focuses the popup.

I'd like to be able to switch off initial focus.

Note, I've tried to pass in the background element that I need to keep focus but it doesn't seem to work.

Examples in other libraries

floating-ui#FloatingFocusManager supports a negative number to ignore the initialFocus therefore, I am actually able to pass in -1 into Popover and it'll do as expected but I will get a type error.

Motivation

I sometimes use this component to display transient flyouts that show information (and only gain focus if you interact with them). I need another element on the page to maintain its focus because it reacts to keyboard shortcuts.

@sebinsua sebinsua added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 7, 2025
@zannager zannager added the component: popover This is the name of the generic UI component, not the React module! label Apr 7, 2025
@mj12albert mj12albert added enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 7, 2025
@atomiks
Copy link
Contributor

atomiks commented Apr 8, 2025

The -1 workaround (and casting/silencing the error) doesn't seem to work properly when tabbing. Focus should be moved into the popup, but it closes instead, unless there's a focusable/tabbable element inside of it. (If there isn't, it should focus the popup container itself). This seems to be a bug caused by tabindex=0 not being assigned onto the popup by Floating UI (it has -1 instead of 0) when there's no tabbable/focusable children.

You can set tabIndex={0} manually in this case: https://codesandbox.io/p/sandbox/bold-farrell-xdj8s5?file=%2Fsrc%2FApp.tsx%3A3%2C41

@sebinsua
Copy link
Contributor Author

sebinsua commented Apr 8, 2025

@atomiks Will my current workaround of passing in initialFocus={-1) so that the original background element is still focused continue to work after this change?

We have a couple of unusual components in our app. The one I'm describing above is kind of like a 'Toast' component that notifies the user of changes they're making via keyboard shortcuts. And the keyboard shortcuts are only available when a particular section of the app is focused. I'm not expecting a 'flyout' notification to seize focus unless we interact with controls within it.

There may be other ways for me to workaround the problem, too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: popover This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature has workaround
Projects
None yet
Development

No branches or pull requests

4 participants