Fixed SearchModal not cleaning up body overflow #31402

**Changes:**
- Added `isDialogOpen = open && !hidden` logic to properly unmount Dialog component
- Removed `hidden` prop from Dialog component and use `isDialogOpen` for both `open` prop and conditional rendering
- Added 2 tests verifying Dialog is completely unmounted (not just hidden) when closed #31402

Signed-off-by: fcamgz <fatihcamgoz@hotmail.com.tr>

.changeset/orange-friends-march.md

@@ -0,0 +1,11 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Fix SearchModal Dialog not unmounting properly on close
+
+Fixed issue where Dialog was hidden but not unmounted, preventing
+Material-UI from removing overflow:hidden from body element.
+Added tests to verify Dialog is properly removed from DOM.
+
+Signed-off-by: fcamgz <fatihcamgoz@hotmail.com.tr>

plugins/search/src/components/SearchModal/SearchModal.test.tsx

@@ -248,4 +248,36 @@ describe('SearchModal', () => {
 
     expect(navigate).toHaveBeenCalledWith('/search?query=term');
   });
+
+  it('should completely unmount the Dialog from DOM when open prop is false', async () => {
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <SearchModal open={false} hidden={false} toggleModal={toggleModal} />
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/search': rootRouteRef,
+        },
+      },
+    );
+
+    // Dialog should not exist in the DOM at all (unmounted, not just hidden)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('should completely unmount the Dialog from DOM when hidden prop is true', async () => {
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <SearchModal open hidden toggleModal={toggleModal} />
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/search': rootRouteRef,
+        },
+      },
+    );
+
+    // Dialog should not exist in the DOM at all (unmounted, not just hidden)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
 });

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -211,6 +211,8 @@ export const SearchModal = (props: SearchModalProps) => {
 
   const classes = useStyles();
 
+  const isDialogOpen = open && !hidden;
+
   return (
     <Dialog
       classes={{
@@ -221,10 +223,9 @@ export const SearchModal = (props: SearchModalProps) => {
       aria-modal="true"
       fullWidth
       maxWidth="lg"
-      open={open}
-      hidden={hidden}
+      open={isDialogOpen}
     >
-      {open && (
+      {isDialogOpen && (
         <SearchContextProvider inheritParentContextIfAvailable>
           {(children &&
             children({