The unbinding in disconnectedCallback should be binding in connectedC…

…allback, not in firstUpdated. fixed #341
zdhxiong · Oct 22, 2024 · 3bdd502 · 3bdd502
1 parent 6c9ef64
commit 3bdd502
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 51 deletions.
diff --git a/packages/mdui/src/components/dropdown/index.ts b/packages/mdui/src/components/dropdown/index.ts
@@ -335,10 +335,21 @@ export class Dropdown extends MduiElement<DropdownEventMap> {
       this.overflowAncestors.forEach((ancestor) => {
         ancestor.addEventListener('scroll', this.onWindowScroll);
       });
+
+      // triggerElement 的尺寸变化时，重新调整 panel 的位置
+      this.observeResize = observeResize(this.triggerElement, () => {
+        this.updatePositioner();
+      });
     });
   }
 
   public override disconnectedCallback(): void {
+    // 移除组件时，如果关闭动画正在进行中，则会导致关闭动画无法执行完成，最终组件无法隐藏
+    // 具体场景为 vue 的 <keep-alive> 中切换走，再切换回来时，面板仍然打开着
+    if (!this.open && this.panelRef.value) {
+      this.panelRef.value.hidden = true;
+    }
+
     super.disconnectedCallback();
 
     document.removeEventListener('pointerdown', this.onDocumentClick);
@@ -361,11 +372,6 @@ export class Dropdown extends MduiElement<DropdownEventMap> {
       this.triggerElement.addEventListener('click', this.onClick);
       this.triggerElement.addEventListener('contextmenu', this.onContextMenu);
       this.triggerElement.addEventListener('mouseenter', this.onMouseEnter);
-
-      // triggerElement 的尺寸变化时，重新调整 panel 的位置
-      this.observeResize = observeResize(this.triggerElement, () => {
-        this.updatePositioner();
-      });
     });
   }
 

diff --git a/packages/mdui/src/components/navigation-drawer/index.ts b/packages/mdui/src/components/navigation-drawer/index.ts
@@ -152,26 +152,12 @@ export class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
   }
 
   // contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body
-  @watch('contained')
+  @watch('contained', true)
   private async onContainedChange() {
     await this.definedController.whenDefined();
 
     this.observeResize?.unobserve();
-
-    this.observeResize = observeResize(
-      this.contained ? this.parentElement! : document.documentElement,
-      () => {
-        const target = this.contained ? this.parentElement! : undefined;
-        this.mobile = breakpoint(target).down('md');
-
-        // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
-        if (this.isParentLayout) {
-          this.layoutManager!.updateLayout(this, {
-            width: this.isModal ? 0 : undefined,
-          });
-        }
-      },
-    );
+    this.setObserveResize();
   }
 
   @watch('placement', true)
@@ -423,7 +409,12 @@ export class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
 
   public override connectedCallback(): void {
     super.connectedCallback();
+
     this.modalHelper = new Modal(this);
+
+    this.definedController.whenDefined().then(() => {
+      this.setObserveResize();
+    });
   }
 
   public override disconnectedCallback(): void {
@@ -468,6 +459,23 @@ export class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
       ></slot>`;
   }
 
+  private setObserveResize() {
+    this.observeResize = observeResize(
+      this.contained ? this.parentElement! : document.documentElement,
+      () => {
+        const target = this.contained ? this.parentElement! : undefined;
+        this.mobile = breakpoint(target).down('md');
+
+        // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
+        if (this.isParentLayout) {
+          this.layoutManager!.updateLayout(this, {
+            width: this.isModal ? 0 : undefined,
+          });
+        }
+      },
+    );
+  }
+
   private onOverlayClick() {
     this.emit('overlay-click');
 

diff --git a/packages/mdui/src/components/select/index.ts b/packages/mdui/src/components/select/index.ts
@@ -322,6 +322,12 @@ export class Select
     this.definedController.whenDefined().then(() => {
       this.requestUpdate();
     });
+
+    this.updateComplete.then(() => {
+      this.observeResize = observeResize(this.textFieldRef.value!, () =>
+        this.resizeMenu(),
+      );
+    });
   }
 
   public override disconnectedCallback(): void {
@@ -377,14 +383,6 @@ export class Select
     this.invalid = !this.hiddenInputRef.value!.checkValidity();
   }
 
-  protected override firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-
-    this.observeResize = observeResize(this.textFieldRef.value!, () =>
-      this.resizeMenu(),
-    );
-  }
-
   protected override render(): TemplateResult {
     const hasSelection = this.multiple ? !!this.value.length : !!this.value;
 

diff --git a/packages/mdui/src/components/tabs/tabs.ts b/packages/mdui/src/components/tabs/tabs.ts
@@ -178,19 +178,21 @@ export class Tabs extends MduiElement<TabsEventMap> {
     this.updateIndicator();
   }
 
+  public override connectedCallback() {
+    super.connectedCallback();
+
+    this.updateComplete.then(() => {
+      this.observeResize = observeResize(this.containerRef.value!, () =>
+        this.updateIndicator(),
+      );
+    });
+  }
+
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this.observeResize?.unobserve();
   }
 
-  protected override firstUpdated(_changedProperties: PropertyValues) {
-    super.firstUpdated(_changedProperties);
-
-    this.observeResize = observeResize(this.containerRef.value!, () =>
-      this.updateIndicator(),
-    );
-  }
-
   protected override render(): TemplateResult {
     return html`<div
         ${ref(this.containerRef)}

diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts
@@ -631,8 +631,20 @@ export class TextField
     );
   }
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.updateComplete.then(() => {
+      this.setTextareaHeight();
+      this.observeResize = observeResize(this.inputRef.value!, () =>
+        this.setTextareaHeight(),
+      );
+    });
+  }
+
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
+
     this.observeResize?.unobserve();
     offLocaleReady(this);
   }
@@ -736,15 +748,6 @@ export class TextField
     offLocaleReady(this);
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues) {
-    super.firstUpdated(_changedProperties);
-
-    this.setTextareaHeight();
-    this.observeResize = observeResize(this.inputRef.value!, () =>
-      this.setTextareaHeight(),
-    );
-  }
-
   protected override render(): TemplateResult {
     const hasIcon = !!this.icon || this.hasSlotController.test('icon');
     const hasEndIcon =

diff --git a/packages/mdui/src/components/tooltip/index.ts b/packages/mdui/src/components/tooltip/index.ts
@@ -289,6 +289,13 @@ export class Tooltip extends MduiElement<TooltipEventMap> {
     this.overflowAncestors.forEach((ancestor) => {
       ancestor.addEventListener('scroll', this.onWindowScroll);
     });
+
+    this.definedController.whenDefined().then(() => {
+      // trigger 尺寸变化时，重新调整 tooltip 的位置
+      this.observeResize = observeResize(this.target, () => {
+        this.updatePositioner();
+      });
+    });
   }
 
   public override disconnectedCallback(): void {
@@ -315,11 +322,6 @@ export class Tooltip extends MduiElement<TooltipEventMap> {
       target.addEventListener('keydown', this.onKeydown);
       target.addEventListener('mouseenter', this.onMouseEnter);
       target.addEventListener('mouseleave', this.onMouseLeave);
-
-      // trigger 尺寸变化时，重新调整 tooltip 的位置
-      this.observeResize = observeResize(target, () => {
-        this.updatePositioner();
-      });
     });
   }