[Dialog] Focus lost on non-modal dialog after interacting with a full screen dialog
Open
@siriwatknp is already working on this.
Since Dec 31, 2024.
accessibility
scope: dialog
scope: modal
support: question
waiting for 👍
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps:
- Open this link to live example: https://codesandbox.io/p/sandbox/exciting-banzai-m76rln
- The chat dialog is open by default. Open the full screen dialog by clicking on the button below the app bar.
- Notice that the chat bot window can still be used and a message can be typed in the textfield.
- Click on something in the full screen dialog, like the dropdown or list item.
- You can't change the focus back to the chat bot text field anymore.
Current behavior
The chat bot text field isn't set to focused anymore once you interact with the full screen dialog.
Expected behavior
The chat bot text field should still be able to be focused.
Context
We've found that by adding the disableEnforceFocus prop on the full screen dialog obviously works (as many others have pointed out) and allows the chat bot text field to be focused no matter what you do in the background. However, we have two questions related to this:
- Why does this work in the very beginning before you interact with something on the full screen dialog? Is this a bug of some sort?
- We have a lot of dialogs and drawers and other things in our UI. Is the only option to add this prop,
disableEnforceFocus, for each one or is there something we can just set on the chat bot type dialog instead to make it easier?
Your environment
npx @mui/envinfo
System:
OS: macOS 15.2
Binaries:
Node: 20.12.2 - /usr/local/bin/node
npm: 10.5.0 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.205
Edge: Not Found
Safari: 18.2
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.0
@mui/base: 5.0.0-beta.68
@mui/core-downloads-tracker: 6.3.0
@mui/lab: ^6.0.0-beta.21 => 6.0.0-beta.21
@mui/material: ^6.2.1 => 6.3.0
@mui/private-theming: 6.3.0
@mui/styled-engine: 6.3.0
@mui/system: 6.3.0
@mui/types: 7.2.20
@mui/utils: 6.2.1
@mui/x-data-grid: 7.23.3
@mui/x-data-grid-pro: ^7.21.0 => 7.23.3
@mui/x-date-pickers: 7.23.3
@mui/x-date-pickers-pro: ^7.21.0 => 7.23.3
@mui/x-internals: 7.23.0
@mui/x-license: ^7.21.0 => 7.23.2
@types/react: ^18.3.17 => 18.3.17
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.6.3 => 5.7.2
Search keywords: non-modal dialog, chatbot, disableEnforceFocus
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.