feat(popover, tooltip): DLT-3419 auto-append to nearest dialog for top-layer support (#1266)

Author: ninarepetto

packages/dialtone-vue/components/Popover/Popover.test.js

@@ -388,6 +388,71 @@ describe('DtPopover Tests', () => {
     });
   });
 
+  describe('appendTo behavior', () => {
+    describe('when anchor is inside a <dialog> element and appendTo is "body"', () => {
+      it('should append the popover to the dialog element, not body', async () => {
+        const dialogEl = document.createElement('dialog');
+        document.body.appendChild(dialogEl);
+
+        const localWrapper = mount(DtPopover, {
+          props: { ...baseProps, open: null },
+          slots: { ...baseSlots },
+          global: { stubs: { transition: false } },
+          attachTo: dialogEl,
+        });
+
+        const btn = localWrapper.find('[data-qa="dt-button"]');
+        await btn.trigger('click');
+
+        expect(localWrapper.vm.tip.popper.parentElement).toBe(dialogEl);
+
+        localWrapper.unmount();
+        document.body.removeChild(dialogEl);
+      });
+    });
+
+    describe('when anchor is NOT inside a <dialog> element and appendTo is "body"', () => {
+      it('should append the popover to document.body', async () => {
+        const localWrapper = mount(DtPopover, {
+          props: { ...baseProps, open: null },
+          slots: { ...baseSlots },
+          global: { stubs: { transition: false } },
+          attachTo: document.body,
+        });
+
+        const btn = localWrapper.find('[data-qa="dt-button"]');
+        await btn.trigger('click');
+
+        expect(localWrapper.vm.tip.popper.parentElement).toBe(document.body);
+
+        localWrapper.unmount();
+      });
+    });
+
+    describe('when anchor is inside a <dialog> but appendTo is explicitly set', () => {
+      it('should use the explicit appendTo target, bypassing dialog detection', async () => {
+        const dialogEl = document.createElement('dialog');
+        document.body.appendChild(dialogEl);
+
+        const localWrapper = mount(DtPopover, {
+          props: { ...baseProps, open: null, appendTo: 'parent' },
+          slots: { ...baseSlots },
+          global: { stubs: { transition: false } },
+          attachTo: dialogEl,
+        });
+
+        const btn = localWrapper.find('[data-qa="dt-button"]');
+        await btn.trigger('click');
+
+        // 'parent' means the popover container element, not the dialog
+        expect(localWrapper.vm.tip.popper.parentElement).not.toBe(dialogEl);
+
+        localWrapper.unmount();
+        document.body.removeChild(dialogEl);
+      });
+    });
+  });
+
   describe('When anchor slot content changes', () => {
     it('should attach the tippy instance to the new DOM node', async () => {
       const component = {

packages/dialtone-vue/components/Popover/Popover.vue

@@ -526,7 +526,9 @@ export default {
 
     /**
      * Sets the element to which the popover is going to append to.
-     * 'body' will append to the nearest body (supports shadow DOM).
+     * 'body' will append to the nearest ancestor <dialog> element when inside one
+     * (keeping the popover in the browser's top layer), or to the nearest body otherwise.
+     * To always append to body regardless of dialog context, pass document.body as an HTMLElement.
      * 'root' will try append to the iFrame's parent body if it is contained in an iFrame
      * and has permissions to access it, else, it'd default to 'parent'.
      * @values 'body', 'parent', 'root', HTMLElement
@@ -1074,7 +1076,10 @@ export default {
 
       switch (this.appendTo) {
         case 'body':
-          internalAppendTo = this.anchorEl?.getRootNode()?.querySelector('body');
+          // When inside a native <dialog> (e.g. DtModal in Dialtone Next), append to the
+          // dialog so the popover stays in the browser's top layer. Otherwise fall back to body.
+          internalAppendTo = this.anchorEl?.closest('dialog') ??
+            this.anchorEl?.getRootNode()?.querySelector('body');
           break;
 
         case 'root':

packages/dialtone-vue/components/Tooltip/Tooltip.test.js

@@ -307,4 +307,64 @@ describe('DtTooltip tests', () => {
       });
     });
   });
+
+  describe('appendTo behavior', () => {
+    describe('when anchor is inside a <dialog> element and appendTo is "body"', () => {
+      it('should append the tooltip to the dialog element, not body', async () => {
+        const dialogEl = document.createElement('dialog');
+        document.body.appendChild(dialogEl);
+
+        const localWrapper = mount(DtTooltip, {
+          props: { delay: false, appendTo: 'body', open: true },
+          slots: { ...baseSlots },
+          global: { stubs: { transition: false } },
+          attachTo: dialogEl,
+        });
+
+        await flushPromises();
+
+        const tippyBoxInDialog = dialogEl.querySelector('.tippy-box');
+        expect(tippyBoxInDialog).not.toBeNull();
+
+        localWrapper.unmount();
+        document.body.removeChild(dialogEl);
+      });
+    });
+
+    describe('when anchor is NOT inside a <dialog> element', () => {
+      it('should append the tooltip to body', async () => {
+        mockProps = { open: true };
+        updateWrapper();
+        await flushPromises();
+
+        const tippyBoxInBody = document.body.querySelector('.tippy-box');
+        expect(tippyBoxInBody).not.toBeNull();
+      });
+    });
+
+    describe('when anchor is inside a <dialog> but appendTo is explicitly set to an HTMLElement', () => {
+      it('should use the explicit appendTo target, bypassing dialog detection', async () => {
+        const dialogEl = document.createElement('dialog');
+        const explicitTarget = document.createElement('div');
+        document.body.appendChild(dialogEl);
+        document.body.appendChild(explicitTarget);
+
+        const localWrapper = mount(DtTooltip, {
+          props: { delay: false, appendTo: explicitTarget, open: true },
+          slots: { ...baseSlots },
+          global: { stubs: { transition: false } },
+          attachTo: dialogEl,
+        });
+
+        await flushPromises();
+
+        expect(explicitTarget.querySelector('.tippy-box')).not.toBeNull();
+        expect(dialogEl.querySelector('.tippy-box')).toBeNull();
+
+        localWrapper.unmount();
+        document.body.removeChild(dialogEl);
+        document.body.removeChild(explicitTarget);
+      });
+    });
+  });
 });

packages/dialtone-vue/components/Tooltip/Tooltip.vue

@@ -172,7 +172,9 @@ export default {
 
     /**
      * Sets the element to which the tooltip is going to append to.
-     * 'body' will append to the nearest body (supports shadow DOM).
+     * 'body' appends to the nearest ancestor <dialog> element when inside one
+     * (keeping the tooltip in the browser's top layer), or to the nearest body otherwise.
+     * To always append to body regardless of dialog context, pass document.body as an HTMLElement.
      * This prop is not reactive, must be set on initial render.
      * @values 'body', 'parent', HTMLElement,
      */
@@ -488,14 +490,22 @@ export default {
       }
     },
 
+    resolveAppendTo () {
+      // When inside a native <dialog>, append there to stay in the browser's top layer.
+      if (this.appendTo === 'body') {
+        return this.anchor?.closest('dialog') ?? this.anchor?.getRootNode()?.querySelector('body');
+      }
+      return this.appendTo;
+    },
+
     setProps () {
       if (!this.tip || !this.tip.setProps || !this.anchor) return;
 
       if (this.tip && this.tip.setProps) {
         this.tip.setProps({
           ...this.tippyProps,
           // these need to be set here rather than in tippyProps because they are non-reactive
-          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,
+          appendTo: this.resolveAppendTo(),
           zIndex: this.calculateAnchorZindex(),
         });
       }
@@ -529,6 +539,7 @@ export default {
         touch: false,
         onMount: this.onMount,
         showOnCreate: this.internalShow,
+        appendTo: this.resolveAppendTo(),
         popperOptions: getPopperOptions({
           hasHideModifierEnabled: true,
         }),