fix(core/dropdown): nested dropdown fix for shadow dom (#849)

siemens · Nov 3, 2023 · 28e73f5 · 28e73f5
1 parent 3767fce
commit 28e73f5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -38,6 +38,7 @@ export type DropdownTriggerEvent = 'click' | 'hover' | 'focus';
 type DisposeDropdown = () => void;
 type DropdownDisposerEntry = {
   element: HTMLIxDropdownElement;
+  child: HTMLIxDropdownElement;
   dispose: DisposeDropdown;
 };
 const dropdownDisposer = new Map<string, DropdownDisposerEntry>();
@@ -147,7 +148,40 @@ export class Dropdown {
     dropdownDisposer.set(this.localUId, {
       dispose: this.close.bind(this),
       element: this.hostElement,
+      child: null,
     });
+
+    const parentDropdown = this.closestPassShadow(
+      this.hostElement.parentNode,
+      'ix-dropdown'
+    );
+    if (parentDropdown) {
+      for (let entry of dropdownDisposer.values()) {
+        if (entry.element === parentDropdown) {
+          entry.child = this.hostElement;
+        }
+      }
+    }
+  }
+
+  closestPassShadow(node, selector) {
+    if (!node) {
+      return null;
+    }
+
+    if (node instanceof ShadowRoot) {
+      return this.closestPassShadow(node.host, selector);
+    }
+
+    if (node instanceof HTMLElement) {
+      if (node.matches(selector)) {
+        return node;
+      } else {
+        return this.closestPassShadow(node.parentNode, selector);
+      }
+    }
+
+    return this.closestPassShadow(node.parentNode, selector);
   }
 
   get dropdownItems() {
@@ -263,7 +297,7 @@ export class Dropdown {
         if (
           id !== this.localUId &&
           !this.isAnchorSubmenu() &&
-          !entry.element.contains(this.hostElement)
+          entry.child !== this.hostElement
         ) {
           entry.dispose();
         }

diff --git a/packages/core/src/components/dropdown/test/dropdown.spec.tsx b/packages/core/src/components/dropdown/test/dropdown.spec.tsx
@@ -11,6 +11,10 @@ import { newSpecPage } from '@stencil/core/testing';
 import { fireEvent } from '@testing-library/dom';
 import { Dropdown } from '../dropdown';
 
+// https://github.com/ionic-team/stencil/issues/3260
+global.DocumentFragment = class DocumentFragment extends Node {};
+global.ShadowRoot = class ShadowRoot extends DocumentFragment {};
+
 describe('ix-dropdown', () => {
   it('should open with anchor element', async () => {
     const page = await newSpecPage({