bug: popup within floating panel

Author: mathuo

packages/dockview-core/src/dockview/components/popupService.ts

@@ -71,13 +71,13 @@ export class PopupService extends CompositeDisposable {
 
     openPopover(
         element: HTMLElement,
-        position: { x: number; y: number }
+        position: { x: number; y: number; zIndex?: string }
     ): void {
         this.close();
 
         const wrapper = document.createElement('div');
         wrapper.style.position = 'absolute';
-        wrapper.style.zIndex = '99';
+        wrapper.style.zIndex = position.zIndex ?? 'var(--dv-overlay-z-index)';
         wrapper.appendChild(element);
 
         const anchorBox = this._element.getBoundingClientRect();
@@ -92,7 +92,7 @@ export class PopupService extends CompositeDisposable {
         this._active = wrapper;
 
         this._activeDisposable.value = new CompositeDisposable(
-          addDisposableListener(window, 'pointerdown', (event) => {
+            addDisposableListener(window, 'pointerdown', (event) => {
                 const target = event.target;
 
                 if (!(target instanceof HTMLElement)) {

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -378,7 +378,7 @@ export class TabsContainer
                         !panelObject.api.isActive
                     );
 
-                    wrapper.addEventListener('mousedown', () => {
+                    wrapper.addEventListener('pointerdown', () => {
                         this.accessor.popupService.close();
                         tab.element.scrollIntoView();
                         tab.panel.api.setActive();
@@ -388,9 +388,21 @@ export class TabsContainer
                     el.appendChild(wrapper);
                 }
 
+                let tmp: HTMLElement | null = root;
+
+                while (
+                    tmp &&
+                    (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')
+                ) {
+                    tmp = tmp.parentElement;
+                }
+
                 this.accessor.popupService.openPopover(el, {
                     x: event.clientX,
                     y: event.clientY,
+                    zIndex: tmp?.style.zIndex
+                        ? `calc(${tmp.style.zIndex} + 1)`
+                        : undefined,
                 });
             })
         );