fix(aiLabel): link on top of popover fails (#21928)

sangeethababu9223 · web-flow · commit 04440e6c52a7 · 2026-04-13T06:26:00.000Z
* fix(aiLabel): link on top over fails

* fix(toggletip): update test and logic to include nested dom

* fix(AIlabel): test story for the change

* fix(Ailabel): story loadig issue

* fix(Ailabel): story loadig issue 2

* fix(AILabel): move storyspecific component to story folder

* fix(AILabel): refactor outside click logic

* refactor(toggletip): clean up comments

* fix(AILabel): shadowDOM test case update

* fix(tooltip): refactor

* fix(Ailabel): remove test only updates
diff --git a/packages/react/src/components/Toggletip/__tests__/Toggletip-test.js b/packages/react/src/components/Toggletip/__tests__/Toggletip-test.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -514,6 +514,132 @@ describe('Toggletip', () => {
         expect(onKeyDown).toHaveBeenCalledTimes(1);
       });
     });
+
+    describe('Shadow DOM Support', () => {
+      it('should not close when clicking inside the toggletip in Shadow DOM context', async () => {
+        const shadowHost = document.createElement('div');
+        document.body.appendChild(shadowHost);
+
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+        const shadowContainer = document.createElement('div');
+        shadowRoot.appendChild(shadowContainer);
+
+        const { container, getByTestId, getByRole } = render(
+          <Toggletip data-testid="toggletip" defaultOpen>
+            <ToggletipButton label="Show information">test</ToggletipButton>
+            <ToggletipContent>
+              <div data-testid="inner-content">Content</div>
+            </ToggletipContent>
+          </Toggletip>,
+          { container: shadowContainer }
+        );
+
+        const innerContent = getByTestId('inner-content');
+        const toggletip = getByTestId('toggletip');
+
+        const mockEvent = new MouseEvent('mousedown', { bubbles: true });
+        Object.defineProperty(mockEvent, 'composedPath', {
+          value: () => [
+            innerContent,
+            toggletip,
+            shadowContainer,
+            shadowRoot,
+            shadowHost,
+            document.body,
+          ],
+        });
+        Object.defineProperty(mockEvent, 'target', {
+          value: shadowHost,
+        });
+
+        fireEvent(document, mockEvent);
+
+        expect(getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+        expect(toggletip).toHaveClass(`${prefix}--toggletip--open`);
+
+        document.body.removeChild(shadowHost);
+      });
+
+      it('should close when clicking outside the toggletip in Shadow DOM context', async () => {
+        const shadowHost = document.createElement('div');
+        document.body.appendChild(shadowHost);
+
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+        const shadowContainer = document.createElement('div');
+        shadowRoot.appendChild(shadowContainer);
+
+        const { getByTestId, getByRole } = render(
+          <Toggletip data-testid="toggletip" defaultOpen>
+            <ToggletipButton label="Show information">test</ToggletipButton>
+            <ToggletipContent>
+              <div data-testid="inner-content">Content</div>
+            </ToggletipContent>
+          </Toggletip>,
+          { container: shadowContainer }
+        );
+
+        const toggletip = getByTestId('toggletip');
+
+        const outsideElement = document.createElement('div');
+        document.body.appendChild(outsideElement);
+
+        const mockEvent = new MouseEvent('mousedown', { bubbles: true });
+        Object.defineProperty(mockEvent, 'composedPath', {
+          value: () => [outsideElement, document.body],
+        });
+        Object.defineProperty(mockEvent, 'target', {
+          value: outsideElement,
+        });
+
+        fireEvent(document, mockEvent);
+
+        expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        expect(toggletip).not.toHaveClass(`${prefix}--toggletip--open`);
+
+        document.body.removeChild(outsideElement);
+        document.body.removeChild(shadowHost);
+      });
+
+      it('should handle clicks when composedPath is not available (fallback to event.target)', async () => {
+        const shadowHost = document.createElement('div');
+        document.body.appendChild(shadowHost);
+
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+        const shadowContainer = document.createElement('div');
+        shadowRoot.appendChild(shadowContainer);
+
+        const { getByTestId, getByRole } = render(
+          <Toggletip data-testid="toggletip" defaultOpen>
+            <ToggletipButton label="Show information">test</ToggletipButton>
+            <ToggletipContent>
+              <div data-testid="inner-content">Content</div>
+            </ToggletipContent>
+          </Toggletip>,
+          { container: shadowContainer }
+        );
+
+        const innerContent = getByTestId('inner-content');
+        const toggletip = getByTestId('toggletip');
+
+        const mockEvent = new MouseEvent('mousedown', { bubbles: true });
+        Object.defineProperty(mockEvent, 'composedPath', {
+          value: undefined,
+        });
+        Object.defineProperty(mockEvent, 'target', {
+          value: innerContent,
+        });
+
+        fireEvent(document, mockEvent);
+
+        expect(getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+        expect(toggletip).toHaveClass(`${prefix}--toggletip--open`);
+
+        document.body.removeChild(shadowHost);
+      });
+    });
   });
 });
 
diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
@@ -172,16 +172,25 @@ export function Toggletip<E extends ElementType = 'span'>({
   });
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!open || !ref.current) return;
 
     const targetDocument = ref.current.ownerDocument || document;
     const eventType: 'pointerdown' | 'mousedown' =
       'PointerEvent' in window ? 'pointerdown' : 'mousedown';
 
     const handleOutsideClick = (event: MouseEvent | PointerEvent) => {
-      const node = event.target as Node | null;
+      const { current } = ref;
+      if (!current) return;
 
-      if (open && node && !ref.current?.contains(node)) {
+      const isInsideCurrent = (target: EventTarget | null): target is Node =>
+        target instanceof Node && current.contains(target);
+
+      const isInside =
+        isInsideCurrent(event.target) ||
+        (typeof event.composedPath === 'function' &&
+          event.composedPath().some(isInsideCurrent));
+
+      if (!isInside) {
         setOpen(false);
       }
     };
