mui / mui/base-ui

[popover] Focus is not set to the interactive element when it is in another component

Open
#3,199 1 comment 0 reactions 0 assignees View on GitHub
component: popover has workaround type: enhancement
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Bug report

## Current behavior

When Popover's content is changing, focus moves automatically, but is not set to the new interactive element if it is added as a separate component. And works well if the new content is added as a tsx.

Video📽️

https://github.com/user-attachments/assets/63decc30-ab46-453d-9dd8-a286a5025ffa


Looks like this is because of `restoreFocus="popup"` setting in [popover/popup/PopoverPopup.tsx](https://github.com/mui/base-ui/blob/master/packages/react/src/popover/popup/PopoverPopup.tsx#L184).
When I set this property for the ``, it keeps focus on the new element at the same place.
I understand, that this is not good.
It wood be great to be able to reset focus to the first interactive element

## Expected behavior

When the new content is added as a separate component, focus shoud be added to the first interactive element?

## Reproducible example

[CodeSandbox](https://codesandbox.io/p/devbox/competent-phoebe-nm3t7r?workspaceId=ws_Ddd5rrbjzugd76Ymez2gb7)

## Base UI version

1.0.0-beta.4

## Which browser are you using?

Chrome

## Which OS are you using?

Windows

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.