mui / mui/material-ui

[Dialog] Focus lost on non-modal dialog after interacting with a full screen dialog

Open
#44,904 2 comments 0 reactions 1 assignee View on GitHub

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

  1. Open this link to live example: https://codesandbox.io/p/sandbox/exciting-banzai-m76rln
  2. The chat dialog is open by default. Open the full screen dialog by clicking on the button below the app bar.
  3. Notice that the chat bot window can still be used and a message can be typed in the textfield.
  4. Click on something in the full screen dialog, like the dropdown or list item.
  5. 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:

  1. 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?
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.