[Modal or Dialog]: Modal Background Overlap When Used in map() Without Unique id

[Bittukr7479]

Steps to reproduce

Current behavior

When using the Modal component inside a map() function without unique state or IDs:

1. Clicking the "Open Modal" button for any item in the list opens all modals in the map() simultaneously.

2. The Modal's backdrop (BackdropComponent) becomes darker or fully black, with each modal stacking a new backdrop.

3. This occurs regardless of whether only one modal is intended to open.

Expected behavior

1. Only the modal for the clicked item should open.
2. The BackdropComponent should appear once and not stack or become overly dark, even when multiple modals are rendered.
3. There should be no visual overlap or stacking issues with the modal's backdrop.

Context

I am trying to render multiple modals dynamically using a map() function for a list of items. Each modal should work independently. However, the issue arises when:

1. The same state or ID is used for all modals.
2. No unique identifier is provided for the Modal.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Dialog Modal

[sai6855]

Please provide a github or sandbox link that shows the problem, the description are very unclear

[Bittukr7479]

Exapmple code without UniqueID (issue):

import React, { useState } from 'react';
import { Box, Button, Modal } from '@mui/material';

const ModalIssueWithoutUniqueID = () => {
  const items = [1, 2, 3]; // Example data
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>
          <Button onClick={handleOpen}>Open Modal {item}</Button>
          <Modal
            open={open}
            onClose={handleClose}
            aria-labelledby="modal-title"
            aria-describedby="modal-description"
          >
            <Box
              sx={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: 300,
                bgcolor: 'background.paper',
                boxShadow: 24,
                p: 4,
              }}
            >
              <h2 id="modal-title">Modal {item}</h2>
              <p id="modal-description">
                This is the content of modal {item}.
              </p>
            </Box>
          </Modal>
        </div>
      ))}
    </div>
  );
};


export default ModalIssueWithoutUniqueID;

Exapmple code with UniqueID (alternative solution):

import React, { useState } from 'react';
import { Box, Button, Modal } from '@mui/material';

const ModalIssueExample = () => {
  const items = [1, 2, 3]; // Example data
  const [openStates, setOpenStates] = useState({});

  const handleOpen = (id) => {
    setOpenStates((prev) => ({ ...prev, [id]: true }));
  };

  const handleClose = (id) => {
    setOpenStates((prev) => ({ ...prev, [id]: false }));
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item}>
          <Button onClick={() => handleOpen(item)}>Open Modal {item}</Button>
          <Modal
            open={!!openStates[item]}
            onClose={() => handleClose(item)}
            aria-labelledby={`modal-title-${item}`}
            aria-describedby={`modal-description-${item}`}
          >
            <Box
              sx={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: 300,
                bgcolor: 'background.paper',
                boxShadow: 24,
                p: 4,
              }}
            >
              <h2 id={`modal-title-${item}`}>Modal {item}</h2>
              <p id={`modal-description-${item}`}>
                This is the content of modal {item}.
              </p>
            </Box>
          </Modal>
        </div>
      ))}
    </div>
  );
};

export default ModalIssueExample;