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

user_4371033 0
Viewed 488

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.

enter image description here

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?

enter image description here

material-ui typescript reactjs ecmascript-6 javascript
1 Answers

The maintainer answered the question in this issue. He told that the behavior is normal due to keepMounted prop, which is documented as follows:

Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.

When I look at the dialogs page of material ui website, I don't actually see duplication, but some of the dialogs that have the keepMounted prop, that are already in the DOM but with visibility: hidden and aria-hidden="true", and get visible when click on open.

I have also tried locally and with or without the keepMounted prop I have no duplication. Only the fact that the dialog is already in the DOM from the beginning or not. So probably in your example you have two different dialogs rendered, one with the prop and one without.

user_17743320
Related