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

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?

https://stackoverflow.com/questions/65912743/why-is-it-that-material-ui-calls-their-dialogs-twice January 27, 2021 at 12:04PM