Add [inert] attribute to #root when in modal dialog

Fixes #2618
specify · Mar 28, 2023 · b5959ee · b5959ee
1 parent ec0ad44
commit b5959ee
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/specifyweb/frontend/js_src/lib/components/Core/Contexts.tsx b/specifyweb/frontend/js_src/lib/components/Core/Contexts.tsx
@@ -123,6 +123,7 @@ export function Contexts({
                   header={commonText.loading()}
                   isOpen={isLoading}
                   onClose={undefined}
+                  modal={false}
                 >
                   {loadingBar}
                 </Dialog>

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
@@ -167,6 +167,18 @@ export function Dialog({
 }): JSX.Element {
   const id = useId('modal');
 
+  const root = document.getElementById('root');
+  React.useEffect(() => {
+    if (modal === true) {
+      root?.setAttribute('inert', 'true');
+    } else {
+      root?.removeAttribute('inert');
+    }
+    return () => {
+      root?.removeAttribute('inert');
+    };
+  }, [modal]);
+
   const [modifyTitle] = usePref('general', 'dialog', 'updatePageTitle');
   useTitle(modal && isOpen && modifyTitle ? header : undefined);