From 4113ad9dcb56e967eeef2a9e0f3ad60aeea56fe4 Mon Sep 17 00:00:00 2001
From: logonoff <git@logonoff.co>
Date: Mon, 29 Sep 2025 16:02:38 -0400
Subject: [PATCH] fix(DrawerPanelContent): add inert when drawer is closed

---
 .../components/Drawer/DrawerPanelContent.tsx  |  7 +++++++
 .../__tests__/DrawerPanelContent.test.tsx     | 20 +++++++++++++++++++
 .../DrawerPanelContent.test.tsx.snap          |  1 +
 .../__snapshots__/Drawer.test.tsx.snap        |  2 ++
 4 files changed, 30 insertions(+)

diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
index 73f5bd6d2a4..9cafec596dc 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -90,6 +90,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
+  const [shouldCollapseSpace, setShouldCollapseSpace] = useState(hidden);
   const previouslyFocusedElement = useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
@@ -108,6 +109,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
+      setShouldCollapseSpace(false);
     }
   }, [isStatic, isExpanded]);
 
@@ -380,6 +382,10 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
                   onExpand(ev);
                 }
                 setIsExpandedInternal(!hidden);
+                // We also need to collapse the space when the panel is hidden to prevent automation from scrolling to it
+                if (hidden && ev.nativeEvent.propertyName === 'transform') {
+                  setShouldCollapseSpace(true);
+                }
                 if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
                   setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
                 }
@@ -390,6 +396,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               ...((defaultSize || minSize || maxSize) && boundaryCssVars),
               ...style
             }}
+            {...(shouldCollapseSpace && { inert: '' })}
             {...props}
             ref={panel}
           >
diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx
index 8f553ab09d6..d0f53937dfa 100644
--- a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx
+++ b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx
@@ -122,6 +122,26 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
 
+test('Does not render with inert when drawer is expanded', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).not.toHaveAttribute('inert');
+});
+
+test('Renders with inert when drawer is collapsed', () => {
+  render(
+    <Drawer>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).toHaveAttribute('inert');
+});
+
 test('Applies style prop as expected', () => {
   render(
     <Drawer isExpanded>
diff --git a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
index b17ab76a1e7..42b5eb32586 100644
--- a/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
     class="pf-v6-c-drawer__panel ''"
     hidden=""
     id="generated-id"
+    inert=""
   />
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 11b5da260a4..03220914f30 100644
--- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -281,6 +281,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        inert=""
       />
     </div>
   </div>
@@ -308,6 +309,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        inert=""
       />
     </div>
   </div>