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

[teryn-trimble]

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

[siriwatknp]

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?

The behavior of modal is to force user to interact with the modal and its children.

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?

Sorry, I don't see a way to make the Fullscreen dialog aware of the Chat dialog yet.
You can create a wrapper component of the Dialog and set disableEnforceFocus: true as a baseline for creating dialogs.

[teryn-trimble]

Thanks for the info, @siriwatknp! We did add a default prop override for MuiModal in our theme, which seems to be working for both dialogs and drawers. If there are any other suggestions though for a way to make this easier and/or some different way to code the chat window, please let me know. We ended up just using the non-modal example as our starting point, but also tried it with using a Popper which had similar results. Thank you!

    components: {
        MuiModal: {
            defaultProps: {
                disableEnforceFocus: true,
            },
        },
    },