fixed #282 dropdown, tooltip 监听所有支持 overflow 的父元素滚动

packages/mdui/package.json

@@ -51,6 +51,7 @@
     "@mdui/shared": "workspace:^",
     "@mdui/jq": "workspace:^",
     "@open-wc/dedupe-mixin": "^1.4.0",
+    "@floating-ui/utils": "^0.1.6",
     "classcat": "^5.0.4",
     "is-promise": "^4.0.0",
     "lit": "^3.0.0",

packages/mdui/src/components/dropdown/index.ts

@@ -5,6 +5,7 @@ import {
   queryAssignedElements,
 } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
@@ -177,6 +178,7 @@ export class Dropdown extends MduiElement<DropdownEventMap> {
   private closeTimeout!: number;
 
   private observeResize?: ObserveResize;
+  private overflowAncestors?: ReturnType<typeof getOverflowAncestors>; // todo 后续改用 floating-ui 实现
   private readonly panelRef: Ref<HTMLElement> = createRef();
   private readonly definedController = new DefinedController(this, {
     relatedElements: [''],
@@ -328,7 +330,11 @@ export class Dropdown extends MduiElement<DropdownEventMap> {
     this.definedController.whenDefined().then(() => {
       document.addEventListener('pointerdown', this.onDocumentClick);
       document.addEventListener('keydown', this.onDocumentKeydown);
-      window.addEventListener('scroll', this.onWindowScroll);
+
+      this.overflowAncestors = getOverflowAncestors(this.triggerElement);
+      this.overflowAncestors.forEach((ancestor) => {
+        ancestor.addEventListener('scroll', this.onWindowScroll);
+      });
     });
   }
 
@@ -337,7 +343,10 @@ export class Dropdown extends MduiElement<DropdownEventMap> {
 
     document.removeEventListener('pointerdown', this.onDocumentClick);
     document.removeEventListener('keydown', this.onDocumentKeydown);
-    window.removeEventListener('scroll', this.onWindowScroll);
+
+    this.overflowAncestors?.forEach((ancestor) => {
+      ancestor.removeEventListener('scroll', this.onWindowScroll);
+    });
 
     this.observeResize?.unobserve();
   }

packages/mdui/src/components/tooltip/index.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/filter.js';
@@ -168,6 +169,7 @@ export class Tooltip extends MduiElement<TooltipEventMap> {
   public open = false;
 
   private observeResize?: ObserveResize;
+  private overflowAncestors?: ReturnType<typeof getOverflowAncestors>; // todo 后续改用 floating-ui 实现
   private hoverTimeout!: number;
   private readonly popupRef: Ref<HTMLElement> = createRef();
   private readonly hasSlotController = new HasSlotController(
@@ -282,14 +284,21 @@ export class Tooltip extends MduiElement<TooltipEventMap> {
     super.connectedCallback();
 
     document.addEventListener('pointerdown', this.onDocumentClick);
-    window.addEventListener('scroll', this.onWindowScroll);
+
+    this.overflowAncestors = getOverflowAncestors(this.target);
+    this.overflowAncestors.forEach((ancestor) => {
+      ancestor.addEventListener('scroll', this.onWindowScroll);
+    });
   }
 
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
 
     document.removeEventListener('pointerdown', this.onDocumentClick);
-    window.removeEventListener('scroll', this.onWindowScroll);
+
+    this.overflowAncestors?.forEach((ancestor) => {
+      ancestor.removeEventListener('scroll', this.onWindowScroll);
+    });
 
     this.observeResize?.unobserve();
   }