Why is it that material-ui calls their dialogs twice?

[marcelo-umg]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I tried to set a modal first and I noticed that behaviour, then I changed it for a dialog and it is the same.

I tried this:

import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import { useStores } from './stores';
import { useObserver } from 'mobx-react';

export const MyDialog: React.FC<Partial<DialogProps>> = (props) => useObserver(() => {
  const { uiStore: { dialogConfig: { open, body } } } = useStores();

  if (!body) { return null; }

  return (
    <Dialog {...{ ...props, open, maxWidth: false }}>
      { body }
    </Dialog>
  );
});

I call it in the app.tsx: <MyDialog />

And when I call the function to show the dialog, it shows twice in the DOM, what makes me curious is that one of them has the aria-hidden=true attribute.

But they have the exact same content inside if I inspect them.

I noticed something similar in the docs page https://material-ui.com/components/dialogs/, if you inspect the DOM, there is always one dialog but the difference is that it has visibility: hidden.

Any ideas about this?

Expected Behavior 🤔

Not showing repeated componentes in the DOM even if they are not present in the UI.

Steps to Reproduce 🕹

The issue is present in your docs: https://material-ui.com/components/dialogs/

Steps:

1. Open https://material-ui.com/components/dialogs/
2. Open the devtools Inspect the DOM
3. Check the first div/component after the list of scripts
4. Voilá

Context 🔦

I am trying to avoid not having duplicate components I don't need in the DOM.

Your Environment 🌎

  System:
    OS: macOS 10.15.6
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/Work/mira-editor-plugins/node_modules/.bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: 88.0.705.53
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    @emotion/styled: ^10.0.27 => 10.0.27
    @material-ui/core: ^4.11.0 => 4.11.0
    @material-ui/icons: ^4.9.1 => 4.9.1
    @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.56
    @material-ui/styles:  4.10.0
    @material-ui/system:  4.9.14
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.10.2
    @types/react: ^16.9.49 => 16.9.49
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    typescript: ^3.9.7 => 3.9.7

[oliviertassinari]

These two demos have keepMounted, the behavior is correct

[matt-jensen-purple]

Ok good to know that the behaviour is correct.

This causes accessibility problems for our implementation of the MUI modals though, because the duplicate code causes <label> elements NOT to send focus to the <input>'s for which they have for attribute matching to the <input>s id attribute. This is because the duplicate modal HTML means that the id fields are in fact NOT unique. If I delete one of the duplicate modal HTML root elements in my browser Dev Tools, then focusing of the inputs works correctly / as expected.

[pinguluk]

I got the same problem and even in the console I get errors about the focus, when I click them.

I've made a test in root.render function and the both modals are being displayed

[pinguluk]

Solved.
For me it was due a misconfiguration in Webpack, that caused the issue:

Before

...
const HtmlWebpackPlugin = require("html-webpack-plugin");


let config = {
    optimization: {},
    plugins: [
        new webpack.EnvironmentPlugin(['ENV_VAR']),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
...

After

...


let config = {
    optimization: {},
    plugins: [
        new webpack.EnvironmentPlugin(['ENV_VAR']),
    ],
...

It seems that the html would be loaded twice (?) and thus the modal would trigger twice as well.

[clefayomide]

i got the same problem, a workaround i came up with was to set the visibility of the second occurrence to hidden

.css-79ws1d-MuiModal-root:nth-of-type(2) { visibility: hidden !important; }