fix(ModalWindow): allow focus to go to overlays opened from within th…

…e modal window
alirezamirian · Dec 12, 2024 · 3de14eb · 3de14eb
1 parent 599372d
commit 3de14eb
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/packages/jui/cypress/integration/modal-window_menu.cy.tsx b/packages/jui/cypress/integration/modal-window_menu.cy.tsx
@@ -1,15 +1,61 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
-  IconButton,
   FocusScope,
+  IconButton,
   Item,
   Menu,
+  MenuOverlayFromOrigin,
   MenuTrigger,
   ModalWindow,
   PlatformIcon,
   WindowLayout,
 } from "@intellij-platform/core";
 
+it("allows the focus to go out of modal window and into nested overlays such as menu", () => {
+  const Example = () => {
+    const [showMenu, setShowMenu] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    return (
+      <ModalWindow>
+        <WindowLayout
+          header="Modal window"
+          content={
+            <div style={{ padding: "1rem" }}>
+              <input
+                ref={inputRef}
+                onInput={(e) => setShowMenu(e.currentTarget.value !== "")}
+              />
+              {showMenu && (
+                <MenuOverlayFromOrigin
+                  origin={{
+                    clientX: inputRef.current?.getBoundingClientRect().x ?? 0,
+                    clientY:
+                      inputRef.current?.getBoundingClientRect().bottom ?? 0,
+                  }}
+                  onClose={() => {
+                    setShowMenu(false);
+                  }}
+                >
+                  <div style={{ padding: "0.375rem", background: "#000" }}>
+                    <button onClick={() => setShowMenu(false)}>
+                      focused element inside nested overlay
+                    </button>
+                  </div>
+                </MenuOverlayFromOrigin>
+              )}
+            </div>
+          }
+        />
+      </ModalWindow>
+    );
+  };
+  cy.mount(<Example />);
+  cy.get("input").type("a");
+  cy.focused().should("contain.text", "focused element inside nested overlay");
+  cy.realPress("Enter");
+  cy.get("input").should("be.focused");
+});
+
 it("moves focus to the modal window, when opened by a menu item action", () => {
   cy.mount(<ModalOnMenuItem />);
   cy.findByRole("button").click();

diff --git a/packages/jui/src/ModalWindow/ModalWindow.tsx b/packages/jui/src/ModalWindow/ModalWindow.tsx
@@ -173,7 +173,15 @@ function useFocusContainmentFix<T extends HTMLElement>() {
     if (
       !probablyFocusedElement ||
       (probablyFocusedElement instanceof Element &&
-        !e.currentTarget.contains(probablyFocusedElement))
+        !e.currentTarget.contains(probablyFocusedElement) &&
+        // The following condition is added to exclude cases where the focus
+        // is going to an overlay that is opened from within the modal window.
+        // The condition is suboptimal as there is no check on whether the
+        // overlay is a logical child of the modal or not.
+        // However, it seems justified since the entire hook is a temporary hack,
+        // and also it doesn't seem likely for an overlay outside the modal
+        // to grab the focus.
+        !probablyFocusedElement.closest("[data-overlay-root]"))
     ) {
       const elementToFocus = lastFocusedElementRef.current;
       if (elementToFocus) {