fix strange nested modal UX, the backdrop is important

mui · Feb 11, 2023 · a7fa1eb · a7fa1eb
1 parent eb12bb6
commit a7fa1eb
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 4 deletions.
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
@@ -68,11 +68,11 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"
         aria-describedby="child-modal-description"
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={[style, { width: '200px' }]}>
           <h2 id="child-modal-title">Text in a child modal</h2>

diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
@@ -65,11 +65,11 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"
         aria-describedby="child-modal-description"
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={[style, { width: '200px' }]}>
           <h2 id="child-modal-title">Text in a child modal</h2>

diff --git a/docs/data/material/components/modal/NestedModal.js b/docs/data/material/components/modal/NestedModal.js
@@ -30,7 +30,6 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"

diff --git a/docs/data/material/components/modal/NestedModal.tsx b/docs/data/material/components/modal/NestedModal.tsx
@@ -30,7 +30,6 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"