fix(dropdown): fix dropdown position error when window resize (#122)

* fix(dropdown): fix dropdown position error when window resize * chore: new version * chore: change code following CR
FriedRiceNoodles · Apr 8, 2024 · 9c7577e · 9c7577e
1 parent a15f0be
commit 9c7577e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/.changeset/thin-ravens-approve.md b/.changeset/thin-ravens-approve.md
@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+fix dropdown position error when window resize
diff --git a/docs/example/Dropdown/index.md b/docs/example/Dropdown/index.md
@@ -55,3 +55,9 @@ demo:
 | trigger | 下拉菜单的 trigger 区域 |
 | drop    | 下拉菜单的下拉内容区域  |
 | arrow   | 下拉菜单的箭头          |
+
+## 样式变量
+
+| 变量                              | 说明                    | 默认值 |
+| --------------------------------- | ----------------------- | ------ |
+| --banana-dropdown-content-z-Index | dropdown 浮动内容的层级 | 100    |
diff --git a/packages/banana/src/dropdown/index.styles.ts b/packages/banana/src/dropdown/index.styles.ts
@@ -18,7 +18,7 @@ export default [
       top: 0;
       left: 0;
       opacity: 0;
-      z-index: 100;
+      z-index: var(--banana-dropdown-content-z-Index, 100);
     }
   `,
 ];
diff --git a/packages/banana/src/dropdown/index.ts b/packages/banana/src/dropdown/index.ts
@@ -1,4 +1,4 @@
-import { arrow, computePosition, ComputePositionConfig, flip, offset, Side } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, ComputePositionConfig, flip, offset, Side } from '@floating-ui/dom';
 import { CSSResultGroup, html, LitElement, PropertyValueMap } from 'lit';
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -68,6 +68,8 @@ export default class BDropdown extends LitElement {
 
   private _closeTimer: ReturnType<typeof setTimeout> | undefined;
 
+  private cleanup: ReturnType<typeof autoUpdate> | undefined;
+
   private _repositioning() {
     if (!this._trigger || !this._content) return;
 
@@ -272,6 +274,15 @@ export default class BDropdown extends LitElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    if (!this._trigger || !this._content) return;
+
+    if (changedProperties.has('open')) {
+      this.cleanup?.();
+      this.cleanup = this.open ? autoUpdate(this._trigger, this._content, () => this._repositioning()) : undefined;
+    }
+  }
+
   render() {
     return html`
       <div