[@mantine/hooks] Allow use-focus-trap and use-click-outside hooks to …

…work with shadow DOM (#2982) * fix: allow hook to work with shadow DOM * fix: allow hook to work with shadow DOM * fix: allow hook to work with shadow DOM * fix: allow hook to work with shadow DOM * fix: allow hook to work with shadow DOM * fix: ts error with `activeElement` * fix: eslint issues with line length * fix: running prettier on changed files
mantinedev · Nov 19, 2022 · 877d469 · 877d469
1 parent c0e5992
commit 877d469
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/src/mantine-hooks/src/use-click-outside/use-click-outside.ts b/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
@@ -15,7 +15,7 @@ export function useClickOutside<T extends HTMLElement = any>(
       if (Array.isArray(nodes)) {
         const shouldIgnore =
           target?.hasAttribute('data-ignore-outside-clicks') || !document.body.contains(target);
-        const shouldTrigger = nodes.every((node) => !!node && !node.contains(target));
+        const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));
         shouldTrigger && !shouldIgnore && handler();
       } else if (ref.current && !ref.current.contains(target)) {
         handler();

diff --git a/src/mantine-hooks/src/use-focus-trap/create-aria-hider.ts b/src/mantine-hooks/src/use-focus-trap/create-aria-hider.ts
@@ -9,7 +9,7 @@ export function createAriaHider(
 ) {
   const rootNodes: Value[] = Array.from<HTMLElement>(document.querySelectorAll(selector)).map(
     (node) => {
-      if (node.contains(containerNode)) {
+      if (node?.shadowRoot?.contains(containerNode) || node.contains(containerNode)) {
         return undefined;
       }
 

diff --git a/src/mantine-hooks/src/use-focus-trap/scope-tab.ts b/src/mantine-hooks/src/use-focus-trap/scope-tab.ts
@@ -7,8 +7,8 @@ export function scopeTab(node: HTMLElement, event: KeyboardEvent) {
     return;
   }
   const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
-  const leavingFinalTabbable =
-    finalTabbable === document.activeElement || node === document.activeElement;
+  const root = node.getRootNode() as unknown as DocumentOrShadowRoot;
+  const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;
 
   if (!leavingFinalTabbable) {
     return;

diff --git a/src/mantine-hooks/src/use-focus-trap/tabbable.ts b/src/mantine-hooks/src/use-focus-trap/tabbable.ts
@@ -21,7 +21,7 @@ function visible(element: HTMLElement) {
 
   let parentElement: HTMLElement = element;
   while (parentElement) {
-    if (parentElement === document.body) {
+    if (parentElement === document.body || parentElement.nodeType === 11) {
       break;
     }
 

diff --git a/src/mantine-hooks/src/use-focus-trap/use-focus-trap.ts b/src/mantine-hooks/src/use-focus-trap/use-focus-trap.ts
@@ -45,7 +45,7 @@ export function useFocusTrap(active = true): (instance: HTMLElement | null) => v
 
         // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
         setTimeout(() => {
-          if (node.ownerDocument) {
+          if (node.getRootNode()) {
             processNode();
           } else if (process.env.NODE_ENV === 'development') {
             // eslint-disable-next-line no-console