From 9c7577ed893ea6aca14610a0303532e85fa63fc0 Mon Sep 17 00:00:00 2001
From: ZIA <1025013204@qq.com>
Date: Mon, 8 Apr 2024 09:32:30 +0800
Subject: [PATCH] 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
---
 .changeset/thin-ravens-approve.md            |  6 ++++++
 docs/example/Dropdown/index.md               |  6 ++++++
 packages/banana/src/dropdown/index.styles.ts |  2 +-
 packages/banana/src/dropdown/index.ts        | 13 ++++++++++++-
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-ravens-approve.md

diff --git a/.changeset/thin-ravens-approve.md b/.changeset/thin-ravens-approve.md
new file mode 100644
index 00000000..3ce5598b
--- /dev/null
+++ 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
index 3bb28c8f..bea8a020 100644
--- 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
index b3489fe1..f163fcbe 100644
--- 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
index b7a74554..c5a5ce01 100644
--- 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