w-component-vue 2.4.42 → 2.4.44

package/plan1.md

@@ -0,0 +1,213 @@
+# WColorSelect 快速點擊導致選色彈窗無法關閉 — 問題分析與修改計畫
+
+## 一、元件架構說明
+
+```
+WColorSelect.vue
+  └─ WPopup.vue
+       └─ WTooltip.vue
+            ├─ divTrigger (@click → evShow)   ← 外層觸發區
+            │    └─ <slot:trigger>
+            │         └─ 顏色區塊 div (@click → clickColor) ← 內層點擊
+            └─ Teleport → body (divContent)
+                 └─ <slot:content> (選色彈窗)
+                      └─ Confirm 按鈕 (@click → clickColor)
+```
+
+`buildPopper.mjs` 是核心邏輯，管理彈窗的顯示/隱藏與「點擊外側關閉」機制。
+
+---
+
+## 二、關鍵機制說明
+
+### 2-1. `kpRespList` — 彈窗活躍清單
+
+`WTooltip.vue` 模組層級（所有實例共用）的靜態陣列：
+
+```javascript
+let kpRespList = { tooltip: [], popup: [] }
+```
+
+- `addTriggerMode(mode, mmkey)`：彈窗顯示時將 mmkey 推入清單末端
+- `checkTriggerEffMode(mode, mmkey)`：判斷 `last(list) === mmkey`，只有「最後一個顯示的彈窗」才能回應點擊外側關閉事件
+- `removeTriggerMode(mode, mmkey)`：彈窗隱藏時用 `pull` 移除清單中所有同值 mmkey
+
+### 2-2. `hidePopper` 的非同步延遲移除
+
+```javascript
+let hidePopper = (from) => {
+    if (_vo.popperInstance) {
+        _vo.popperInstance.destroy()
+        _vo.popperInstance = null
+    }
+    // ★ 非同步 20ms 後才從 kpRespList 移除
+    setTimeout(() => {
+        removeTrigger()
+    }, 20)
+}
+```
+
+### 2-3. 觸發區雙重點擊事件
+
+點擊「顏色區塊」時，事件冒泡順序為：
+
+1. **內層** `@click="clickColor"` → 呼叫 `vo.show = false`（同步將 `valueTrans` 改為 false）
+2. **外層** WTooltip `divTrigger @click="evShow"` → 此時 `valueTrans` 已是 false，`evShow` 的 guard check 失效 → 重新開啟彈窗
+
+---
+
+## 三、Bug 根源分析
+
+### Bug 1：快速連點同一組件 → 彈窗卡死無法關閉
+
+**事件時序（初始狀態：彈窗已開啟，kpRespList=[mmkeyA]）：**
+
+| 時間點 | 發生事件 |
+|--------|---------|
+| T=0 | 快速第二次點擊觸發區 |
+| T=0, step1 | `clickColor()` 執行 → `vo.show=false` → `valueTrans=false`（同步）→ `displayPopper` 排入 `$nextTick #1` |
+| T=0, step2 | 事件冒泡至 WTooltip `evShow` → 此時 `valueTrans=false` → guard 不攔截 → `triggerEvent(true)` → 排入 `$nextTick #2`（emit input=true） |
+| T=nextTick #1 | `displayPopper` 執行：`b = valueTrans=false` → `hidePopper()` → `_vo.popperShow=false` → **`setTimeout(removeTrigger, 20ms)` 排入** |
+| T=nextTick #2 | emit `input=true` → `show=true` → WTooltip `changeValue` → `updateValue(true)` → `valueTrans=true` → `displayPopper` 排入 `$nextTick #3` |
+| T=nextTick #3 | `displayPopper` 執行：`b = valueTrans=true` → `showPopper()` → **`addTrigger()` 再次把 mmkeyA 推入清單** → kpRespList=[mmkeyA, mmkeyA] |
+| T=+20ms | **setTimeout 到期** → `removeTrigger()` → `pull(kpRespList, mmkeyA)` → **移除所有 mmkeyA** → **kpRespList=[]** |
+
+**結果：** 彈窗視覺上是開啟的，但 `kpRespList=[]`。
+點擊外側時：`checkTriggerEffMode` → `last([]) === mmkeyA` → `undefined === mmkeyA` → **false** → 直接 return，evHide 從不觸發。
+**彈窗永遠無法關閉。**
+
+---
+
+### Bug 2：快速點A後點擊B → 多個彈窗同時卡住
+
+1. 快速連點 A → A 彈窗顯示但 kpRespList=[]（同 Bug 1 後果）
+2. 點擊 B 的觸發區 → B 正常開啟 → kpRespList=[mmkeyB]
+3. A 的 `windowMouseup` listener → `checkTriggerEff_A()` → `last([mmkeyB]) === mmkeyA` → false → 無法關閉 A
+4. 點擊外側 → B 正常關閉，但 A 永遠留在頁面
+
+**同時多個彈窗殘留。**
+
+---
+
+## 四、修改方案
+
+### 方案主軸：修復 `hidePopper` 的 setTimeout 競態條件
+
+**核心問題：** `hidePopper` 的 `removeTrigger` 是 20ms 後異步執行，若此期間 `showPopper` 被呼叫並把 mmkey 再次加入清單，20ms 到期後的 `removeTrigger` 會把「合法存在」的 mmkey 也一起移除。
+
+**修復方法：** 在 `_vo` 中紀錄 setTimeout 的 handle，在 `showPopper` 被呼叫時清除尚未執行的 `removeTrigger`。
+
+---
+
+### 修改 1：`src/js/buildPopper.mjs`
+
+**變更位置 1** — 在 `_vo` 初始化中新增 `removeTriggerTimer`：
+
+```javascript
+// 現有程式碼
+let _vo = {
+    mouseClientX: 0,
+    mouseClientY: 0,
+    cursorTriggerInner: false,
+    clickContentInner: false,
+    popperShow: false,
+    popperInstance: null,
+}
+
+// 修改後：新增 removeTriggerTimer
+let _vo = {
+    mouseClientX: 0,
+    mouseClientY: 0,
+    cursorTriggerInner: false,
+    clickContentInner: false,
+    popperShow: false,
+    popperInstance: null,
+    removeTriggerTimer: null,  // ★ 新增
+}
+```
+
+**變更位置 2** — `showPopper` 函數內，在 `addTrigger()` 之前取消待執行的 removeTrigger：
+
+```javascript
+let showPopper = (from) => {
+    let divTrigger = funGetDivTrigger()
+    if (!isEle(divTrigger)) { return }
+
+    vo.$nextTick(() => {
+        vo.triggerWidth = divTrigger.offsetWidth
+    })
+
+    let divContent = funGetDivContent()
+    if (!isEle(divContent)) { return }
+
+    // ★ 新增：若有待執行的 removeTrigger，先取消它
+    if (_vo.removeTriggerTimer !== null) {
+        clearTimeout(_vo.removeTriggerTimer)
+        _vo.removeTriggerTimer = null
+    }
+
+    // addTrigger（原有）
+    addTrigger()
+
+    // ... 後續 createPopper 等邏輯不變
+}
+```
+
+**變更位置 3** — `hidePopper` 函數內，儲存 setTimeout handle：
+
+```javascript
+let hidePopper = (from) => {
+    if (_vo.popperInstance) {
+        _vo.popperInstance.destroy()
+        _vo.popperInstance = null
+    }
+
+    // ★ 修改：紀錄 timer handle
+    _vo.removeTriggerTimer = setTimeout(() => {
+        _vo.removeTriggerTimer = null
+        removeTrigger()
+    }, 20)
+}
+```
+
+---
+
+### 修改 2：`src/components/WColorSelect.vue`（選擇性但建議）
+
+**問題：** 觸發區的 `@click="clickColor"` 會在彈窗已開啟時觸發 close，事件冒泡後 `evShow` 再次 open，造成每次點擊觸發區都執行「先關後開」的多餘序列，是 Bug 的觸發來源。
+
+**修改方法：** 將觸發區的 `@click="clickColor"` 移除或改為 `stopPropagation` 後不執行動作（讓 WTooltip 的 `evShow` 單獨負責開啟邏輯，Confirm 按鈕負責確認並關閉）。
+
+```html
+<!-- 現有 -->
+<div
+    style="display:flex; align-items:center; cursor:pointer; outline:none;"
+    @click="clickColor"
+>
+
+<!-- 修改後：觸發區不再呼叫 clickColor，改由 WTooltip 的 evShow 控制開關 -->
+<div
+    style="display:flex; align-items:center; cursor:pointer; outline:none;"
+>
+```
+
+> **說明：** Confirm 按鈕已有 `@click="clickColor"` 負責「確認顏色並關閉」，觸發區只需要 WTooltip 的 `evShow` 負責「開啟彈窗」即可，不需要重複綁定 `clickColor`。
+
+---
+
+## 五、修改後預期行為
+
+| 情境 | 修改前 | 修改後 |
+|------|--------|--------|
+| 正常點擊觸發區 | 開啟彈窗 ✓ | 開啟彈窗 ✓ |
+| 點擊外側 | 關閉彈窗 ✓ | 關閉彈窗 ✓ |
+| 快速連點觸發區 | 彈窗卡死無法關閉 ✗ | kpRespList 正確維護，可正常關閉 ✓ |
+| 快速點A後點B | 多個彈窗殘留 ✗ | 只剩最後一個，其餘正常關閉 ✓ |
+| Confirm 按鈕 | 確認並關閉 ✓ | 確認並關閉 ✓ |
+
+---
+
+## 六、修改影響範圍
+
+- `src/js/buildPopper.mjs`：影響所有使用 WTooltip/WPopup 的組件，但變更為純修補競態條件，不改變正常流程
+- `src/components/WColorSelect.vue`：僅影響 WColorSelect 觸發區點擊行為，移除冗餘的 clickColor 呼叫

package/src/AppZoneWDynamicList.vue

@@ -150,7 +150,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-dynamic-list'"
-                    :casename="'filterKeywords & noResultsText'"
+                    :casename="'filterKeywords & statePaddingStyle & noResultsText'"
                 ></demolink>
 
                 <div style="margin-bottom:10px;">
@@ -165,6 +165,7 @@
                     style="width:400px; border:1px solid #ddd;"
                     :filterKeywords="WDynamicList.keywords"
                     :noResultsText="'There are no items to show...'"
+                    :statePaddingStyle="{v:10,h:10}"
                     :rows="WDynamicList.data1"
                 >
                     <template v-slot="props">

package/src/AppZoneWTree.vue

@@ -233,7 +233,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'filterKeywords & noResultsText'"
+                    :casename="'filterKeywords & statePaddingStyle & noResultsText'"
                 ></demolink>
 
                 <div style="margin-bottom:10px;">
@@ -249,6 +249,7 @@
                     :data="WTree.option.items"
                     :filterKeywords="WTree.option.keywords"
                     :noResultsText="'There are no items to show...'"
+                    :statePaddingStyle="{v:10,h:10}"
                 ></w-tree>
 
             </div>

package/src/components/WButtonCircle.vue

@@ -530,7 +530,7 @@ export default {
             let vo = this
 
             //parseSpace
-            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+            let cs = parseSpace(vo.paddingStyle, { ext: {} })
 
             //padding
             let padding = `padding:${cs};`

package/src/components/WColorSelect.vue

@@ -100,27 +100,6 @@
 
                         </div>
 
-                        <div :style="`padding-left:${space}px;`"></div>
-
-                        <WButtonChip
-                            :text="btnText"
-                            :rippleColor="btnRippleColor"
-                            :paddingStyle="btnPaddingStyle"
-                            :textColor="btnTextColor"
-                            :textColorHover="btnTextColorHover"
-                            :textColorActive="btnTextColorActive"
-                            :textFontSize="btnTextFontSize"
-                            :borderRadius="btnBorderRadius"
-                            _borderColor="btnBorderColor"
-                            _borderColorHover="btnBorderColorHover"
-                            _borderColorActive="btnBorderColorActive"
-                            :backgroundColor="btnBackgroundColor"
-                            :backgroundColorHover="btnBackgroundColorHover"
-                            :backgroundColorActive="btnBackgroundColorActive"
-                            :shadow="btnShadow"
-                            @click="clickColor"
-                        ></WButtonChip>
-
                     </div>
 
                 </div>
@@ -194,6 +173,32 @@
                         ></WColorSelectInput>
                     </div>
 
+                    <div :style="`height:${space}px;`"></div>
+
+                    <!-- 確認按鈕區 -->
+                    <div style="text-align:right;">
+
+                        <WButtonChip
+                            :text="btnText"
+                            :rippleColor="btnRippleColor"
+                            :paddingStyle="btnPaddingStyle"
+                            :textColor="btnTextColor"
+                            :textColorHover="btnTextColorHover"
+                            :textColorActive="btnTextColorActive"
+                            :textFontSize="btnTextFontSize"
+                            :borderRadius="btnBorderRadius"
+                            _borderColor="btnBorderColor"
+                            _borderColorHover="btnBorderColorHover"
+                            _borderColorActive="btnBorderColorActive"
+                            :backgroundColor="btnBackgroundColor"
+                            :backgroundColorHover="btnBackgroundColorHover"
+                            :backgroundColorActive="btnBackgroundColorActive"
+                            :shadow="btnShadow"
+                            @click="clickColor"
+                        ></WButtonChip>
+
+                    </div>
+
                 </div>
 
             </div>
@@ -269,7 +274,7 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [barSliderBackgroundColor='#1565C0'] 輸入拖曳球背景顏色字串，預設'#1565C0'
  * @vue-prop {String} [barSliderBackgroundColorHover='#1976D2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'
  * @vue-prop {Number} [popupPlacementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
- * @vue-prop {String} [btnText='OK'] 輸入確認按鈕之文字字串，預設'OK'
+ * @vue-prop {String} [btnText='Confirm'] 輸入確認按鈕之文字字串，預設'Confirm'
  * @vue-prop {String} [btnRippleColor='rgba(255,255,255,0.4)'] 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
  * @vue-prop {Object} [btnPaddingStyle={v:1,h:5}] 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}
  * @vue-prop {String} [btnTextColor='#000'] 輸入確認按鈕之文字顏色字串，預設'#000'
@@ -501,7 +506,7 @@ export default {
         },
         btnText: {
             type: String,
-            default: 'OK',
+            default: 'Confirm',
         },
         btnRippleColor: {
             type: String,

package/src/components/WColorSelectInput.vue

@@ -46,7 +46,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="cki255"
+                                :funVerify="cki255"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -102,7 +102,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="cki255"
+                                :funVerify="cki255"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -158,7 +158,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="cki255"
+                                :funVerify="cki255"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -214,7 +214,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="ckd1"
+                                :funVerify="ckd1"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -275,7 +275,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="cki360"
+                                :funVerify="cki360"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -331,7 +331,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="ckd1"
+                                :funVerify="ckd1"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -387,7 +387,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="ckd1"
+                                :funVerify="ckd1"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"
@@ -443,7 +443,7 @@
 
                             <WText
                                 :style="`width:${inputTextWidth}px;`"
-                                :type="ckd1"
+                                :funVerify="ckd1"
                                 :shadow="false"
                                 :bottomLineBorderColor="'transparent'"
                                 :bottomLineBorderColorHover="'transparent'"

package/src/components/WDynamicList.vue

@@ -33,21 +33,21 @@
 
         </div>
 
-        <div style="padding:12px; font-size:0.8rem;" v-if="!disableLoadingText && lockFromSetRows">
+        <div :style="`${useStatePadding} font-size:0.8rem;`" v-if="!disableLoadingText && lockFromSetRows">
             {{loadingText}}
         </div>
 
         <template v-else>
 
             <!-- 因暫時還沒刷新需顯示項目(useItems.length=0), 又確定已有搜尋結果searchingResults>0, 才顯示searchingText -->
-            <div style="padding:12px; font-size:0.8rem;" v-if="useItems.length===0 && searchingResults>0">
+            <div :style="`${useStatePadding} font-size:0.8rem;`" v-if="useItems.length===0 && searchingResults>0">
                 {{searchingText}}
             </div>
 
             <template v-else>
 
                 <!-- 已確定無搜尋結果searchingResults=0, 才顯示noResultsText -->
-                <div style="padding:12px; font-size:0.8rem;" v-if="searchingResults===0 && noResultsText!==''">
+                <div :style="`${useStatePadding} font-size:0.8rem;`" v-if="searchingResults===0 && noResultsText!==''">
                     {{noResultsText}}
                 </div>
 
@@ -59,17 +59,17 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
-import each from 'lodash-es/each.js'
-import map from 'lodash-es/map.js'
-// import find from 'lodash-es/find.js'
-import join from 'lodash-es/join.js'
-import isNumber from 'lodash-es/isNumber.js'
-import values from 'lodash-es/values.js'
-import isEqual from 'lodash-es/isEqual.js'
-import size from 'lodash-es/size.js'
-import toString from 'lodash-es/toString.js'
-import cloneDeep from 'lodash-es/cloneDeep.js'
+import get from 'lodash-es/get.js'
+import each from 'lodash-es/each.js'
+import map from 'lodash-es/map.js'
+// import find from 'lodash-es/find.js'
+import join from 'lodash-es/join.js'
+import isNumber from 'lodash-es/isNumber.js'
+import values from 'lodash-es/values.js'
+import isEqual from 'lodash-es/isEqual.js'
+import size from 'lodash-es/size.js'
+import toString from 'lodash-es/toString.js'
+import cloneDeep from 'lodash-es/cloneDeep.js'
 import cint from 'wsemi/src/cint.mjs'
 // import cstr from 'wsemi/src/cstr.mjs'
 import genID from 'wsemi/src/genID.mjs'
@@ -94,6 +94,7 @@ import pmThrottle from 'wsemi/src/pmThrottle.mjs'
 import binarySearch from '../js/binarySearch.mjs'
 import globalMemory from '../js/globalMemory.mjs'
 // import convertColor from '../js/convertColor.mjs'
+import parseSpace from '../js/parseSpace.mjs'
 import WPanelScrollyCore from './WPanelScrollyCore.vue'
 
 
@@ -110,6 +111,7 @@ let gm = globalMemory()
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
  * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
+ * @vue-prop {Object} [statePaddingStyle={v:12,h:12}] 輸入狀態區內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:12,h:12}
  * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
@@ -149,6 +151,15 @@ export default {
             type: String,
             default: 'Searching...',
         },
+        statePaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 12,
+                    h: 12,
+                }
+            },
+        },
         show: {
             type: Boolean,
             default: true,
@@ -263,6 +274,20 @@ export default {
             return ft
         },
 
+        useStatePadding: function() {
+            //console.log('computed useStatePadding')
+
+            let vo = this
+
+            //parseSpace
+            let cs = parseSpace(vo.statePaddingStyle, { ext: {} })
+
+            //padding
+            let padding = `padding:${cs};`
+
+            return padding
+        },
+
     },
     methods: {
 

package/src/components/WInputCheckbox.vue

@@ -241,7 +241,7 @@ export default {
             let vo = this
 
             //parseSpace
-            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+            let cs = parseSpace(vo.paddingStyle, { ext: {} })
 
             //padding
             let padding = `padding:${cs};`

package/src/components/WListExpandItem.vue

@@ -72,8 +72,8 @@
 
 <script>
 import { mdiPlay } from '@mdi/js'
-import get from 'lodash-es/get.js'
-import isNumber from 'lodash-es/isNumber.js'
+import get from 'lodash-es/get.js'
+import isNumber from 'lodash-es/isNumber.js'
 import replace from 'wsemi/src/replace.mjs'
 import waitFun from 'wsemi/src/waitFun.mjs'
 import domRipple from '../js/domRipple.mjs'
@@ -236,7 +236,7 @@ export default {
             let vo = this
 
             //parseSpace
-            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+            let cs = parseSpace(vo.paddingStyle, { ext: {} })
 
             //padding
             let padding = `padding:${cs};`

package/src/components/WListItem.vue

@@ -236,7 +236,7 @@ export default {
             let vo = this
 
             //parseSpace
-            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+            let cs = parseSpace(vo.paddingStyle, { ext: {} })
 
             //padding
             let padding = `padding:${cs};`

package/src/components/WPanelBulge.vue

@@ -125,7 +125,7 @@ export default {
             let vo = this
 
             //parseSpace
-            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+            let cs = parseSpace(vo.paddingStyle, { ext: {} })
 
             //padding
             let padding = `padding:${cs};`

package/src/components/WTree.vue

@@ -17,6 +17,7 @@
             :loadingText="loadingText"
             :noResultsText="noResultsText"
             :searchingText="searchingText"
+            :statePaddingStyle="statePaddingStyle"
             :show="show"
             @render="(msg)=>{$emit('render',msg)}"
             @change-view-items="(msg)=>{updateOperateShow(false);$emit('change-view-items',msg)}"
@@ -370,6 +371,7 @@ let gm = globalMemory()
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
  * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
+ * @vue-prop {Object} [statePaddingStyle={v:12,h:12}] 輸入狀態區內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:12,h:12}
  * @vue-prop {Number} [defItemHeight=34] 輸入按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
  * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
@@ -592,6 +594,15 @@ export default {
             type: String,
             default: 'Searching...',
         },
+        statePaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 12,
+                    h: 12,
+                }
+            },
+        },
         defItemHeight: {
             type: Number,
             default: 34,

package/src/js/buildPopper.mjs

@@ -59,6 +59,7 @@ function buildPopper(vo, funGetDivTrigger, funGetDivContent, keyShow, evNameValu
         clickContentInner: false,
         popperShow: false,
         popperInstance: null,
+        removeTriggerTimer: null,
     }
 
     let mounted = () => {
@@ -268,6 +269,12 @@ function buildPopper(vo, funGetDivTrigger, funGetDivContent, keyShow, evNameValu
             return
         }
 
+        //cancelRemoveTrigger, 若hidePopper的非同步removeTrigger尚未執行, 先取消以防止競態條件
+        if (_vo.removeTriggerTimer !== null) {
+            clearTimeout(_vo.removeTriggerTimer)
+            _vo.removeTriggerTimer = null
+        }
+
         //addTrigger, 採同步方式添加, popup顯示前就會mmkey就會進清單
         addTrigger()
 
@@ -339,7 +346,9 @@ function buildPopper(vo, funGetDivTrigger, funGetDivContent, keyShow, evNameValu
 
         //非同步移除用nextTick會太快, 得使用setTimeout
         //不管有沒有popperInstance都進行移除, 於開發階段避免熱更新問題
-        setTimeout(() => {
+        _vo.removeTriggerTimer = setTimeout(() => {
+
+            _vo.removeTriggerTimer = null
 
             //removeTrigger, 需採非同步移除, 避免window事件結束後, 此時會繼續觸發前面popup內的window事件, 若採同步移除就無法讓前面popup判斷是否需屏蔽
             removeTrigger()