From 2830db733457304624fc324aa36c6920b7f95a7f Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 7 Jun 2023 17:20:35 +0000
Subject: [PATCH 1/5] fix: correct nested modal and focus trap behavior

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/data/base/components/modal/NestedModal.js  |  5 +++--
 docs/data/base/components/modal/NestedModal.tsx |  5 +++--
 packages/mui-base/src/FocusTrap/FocusTrap.tsx   | 12 +++++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index d657b62b6e1d8e..b79a39b3349887 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -22,7 +22,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        slots={{ backdrop: Backdrop }}
+        slots={{ backdrop: StyledBackdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>
@@ -115,7 +115,7 @@ const StyledModal = styled(Modal)`
 `;
 
 const StyledBackdrop = styled(Backdrop)`
-  z-index: -1;
+  z-index: 1100;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -135,6 +135,7 @@ const style = (theme) => ({
   padding: '16px 32px 24px 32px',
   backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
   boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
+  'z-index': 1200,
 });
 
 const TriggerButton = styled(Button)(
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index eb97f181069a31..a00d085899e582 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -21,7 +21,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        slots={{ backdrop: Backdrop }}
+        slots={{ backdrop: StyledBackdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>
@@ -112,7 +112,7 @@ const StyledModal = styled(Modal)`
 `;
 
 const StyledBackdrop = styled(Backdrop)`
-  z-index: -1;
+  z-index: 1200;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -132,6 +132,7 @@ const style = (theme: Theme) => ({
   padding: '16px 32px 24px 32px',
   backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
   boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
+  'z-index': 1200,
 });
 
 const TriggerButton = styled(Button)(
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index 012b11fc83f207..ae115afe4b4abb 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -261,6 +261,8 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
           tabbable = getTabbable(rootRef.current as HTMLElement);
         }
 
+        let focusableElem: HTMLElement | null = null;
+
         if (tabbable.length > 0) {
           const isShiftTab = Boolean(
             lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab',
@@ -271,13 +273,17 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
 
           if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
             if (isShiftTab) {
-              focusPrevious.focus();
+              focusabeElem = focusPrevious;
             } else {
-              focusNext.focus();
+              focusabeElem = focusNext;
             }
           }
         } else {
-          rootElement.focus();
+          focusableElem = rootElement;
+        }
+
+        if (focusableElem) {
+          focusableElem.focus();
         }
       }
     };

From 0e94af63b3ad7b52d641ef9b9ec2ed831bb22ab3 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 9 Jun 2023 10:55:21 +0000
Subject: [PATCH 2/5] fix typo in variable name

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-base/src/FocusTrap/FocusTrap.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index ae115afe4b4abb..4bdde5d65a1a07 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -273,9 +273,9 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
 
           if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
             if (isShiftTab) {
-              focusabeElem = focusPrevious;
+              focusableElem = focusPrevious;
             } else {
-              focusabeElem = focusNext;
+              focusableElem = focusNext;
             }
           }
         } else {

From 531dbdeace039d0087cbea523ef0bb246fc8e0f6 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Mon, 12 Jun 2023 12:44:24 +0000
Subject: [PATCH 3/5] fix: use correct z-index plus update backdrop component

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/data/base/components/modal/NestedModal.js          | 2 +-
 docs/data/base/components/modal/NestedModal.tsx.preview | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index b79a39b3349887..a61850173f774a 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -115,7 +115,7 @@ const StyledModal = styled(Modal)`
 `;
 
 const StyledBackdrop = styled(Backdrop)`
-  z-index: 1100;
+  z-index: 1200;
   position: fixed;
   right: 0;
   bottom: 0;
diff --git a/docs/data/base/components/modal/NestedModal.tsx.preview b/docs/data/base/components/modal/NestedModal.tsx.preview
index 9fb0eea2c45780..4b9ce294257b4c 100644
--- a/docs/data/base/components/modal/NestedModal.tsx.preview
+++ b/docs/data/base/components/modal/NestedModal.tsx.preview
@@ -4,7 +4,7 @@
   onClose={handleClose}
   aria-labelledby="parent-modal-title"
   aria-describedby="parent-modal-description"
-  slots={{ backdrop: Backdrop }}
+  slots={{ backdrop: StyledBackdrop }}
 >
   <Box sx={style}>
     <h2 id="parent-modal-title">Text in a modal</h2>

From 4c8f374dbc74a3efb0a96e3d7021bb1a54e7aa3f Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 6 Jul 2023 19:59:00 +0000
Subject: [PATCH 4/5] remove focus trap changes

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/data/base/components/modal/NestedModal.js  |  7 +++----
 docs/data/base/components/modal/NestedModal.tsx |  7 +++----
 packages/mui-base/src/FocusTrap/FocusTrap.tsx   | 12 +++---------
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index 58d64976a1617c..c329e13e8e812a 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -17,7 +17,7 @@ export default function NestedModal() {
   return (
     <div>
       <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
-      <Modal
+      <StyledModal
         open={open}
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
@@ -31,7 +31,7 @@ export default function NestedModal() {
           </p>
           <ChildModal />
         </Box>
-      </Modal>
+      </StyledModal>
     </div>
   );
 }
@@ -112,7 +112,7 @@ const StyledModal = styled(Modal)`
 `;
 
 const StyledBackdrop = styled(Backdrop)`
-  z-index: 1200;
+  z-index: -1;
   position: fixed;
   inset: 0;
   background-color: rgb(0 0 0 / 0.5);
@@ -129,7 +129,6 @@ const style = (theme) => ({
   padding: '16px 32px 24px 32px',
   backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
   boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-  'z-index': 1200,
 });
 
 const TriggerButton = styled(Button)(
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index e8391d7a5ed9c1..a416ffe57f1cdc 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -16,7 +16,7 @@ export default function NestedModal() {
   return (
     <div>
       <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
-      <Modal
+      <StyledModal
         open={open}
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
@@ -30,7 +30,7 @@ export default function NestedModal() {
           </p>
           <ChildModal />
         </Box>
-      </Modal>
+      </StyledModal>
     </div>
   );
 }
@@ -109,7 +109,7 @@ const StyledModal = styled(Modal)`
 `;
 
 const StyledBackdrop = styled(Backdrop)`
-  z-index: 1200;
+  z-index: -1;
   position: fixed;
   inset: 0;
   background-color: rgb(0 0 0 / 0.5);
@@ -126,7 +126,6 @@ const style = (theme: Theme) => ({
   padding: '16px 32px 24px 32px',
   backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
   boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-  'z-index': 1200,
 });
 
 const TriggerButton = styled(Button)(
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index b9b5f898453cd3..feccaa573e4e1a 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -261,8 +261,6 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
           tabbable = getTabbable(rootRef.current as HTMLElement);
         }
 
-        let focusableElem: HTMLElement | null = null;
-
         if (tabbable.length > 0) {
           const isShiftTab = Boolean(
             lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab',
@@ -273,17 +271,13 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
 
           if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
             if (isShiftTab) {
-              focusableElem = focusPrevious;
+              focusPrevious.focus();
             } else {
-              focusableElem = focusNext;
+              focusNext.focus();
             }
           }
         } else {
-          focusableElem = rootElement;
-        }
-
-        if (focusableElem) {
-          focusableElem.focus();
+          rootElement.focus();
         }
       }
     };

From 465155a28568e9fc2165a3476f22f9f1689ec2ef Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 7 Jul 2023 15:58:48 +0000
Subject: [PATCH 5/5] fix failing ci

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/data/base/components/modal/NestedModal.tsx.preview | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/modal/NestedModal.tsx.preview b/docs/data/base/components/modal/NestedModal.tsx.preview
index 4b9ce294257b4c..560fefbccd03b6 100644
--- a/docs/data/base/components/modal/NestedModal.tsx.preview
+++ b/docs/data/base/components/modal/NestedModal.tsx.preview
@@ -1,5 +1,5 @@
 <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
-<Modal
+<StyledModal
   open={open}
   onClose={handleClose}
   aria-labelledby="parent-modal-title"
@@ -13,4 +13,4 @@
     </p>
     <ChildModal />
   </Box>
-</Modal>
\ No newline at end of file
+</StyledModal>
\ No newline at end of file