bug fix

Fix the bug that the filter custom layer could not be closed

Author: huangshuwei

CHANGE-LOG.md

@@ -7,6 +7,18 @@ Vx.x.x(TPL)
 -   Style changes
 -   Dependencies Changes
 
+V2.16.2
+
+### Bug Fixes
+
+-   Fix the bug that the filter custom layer could not be closed
+
+---
+
+### Bug Fixes
+
+-   修复筛选自定义弹层无法关闭的问题
+
 V2.16.1
 
 ### Bug Fixes

package.json

@@ -1,10 +1,10 @@
 {
     "name": "vue-easytable",
-    "version": "2.16.1",
+    "version": "2.16.2",
     "docVersions": [
         {
             "value": "/vue-easytable/",
-            "label": "2.16.1"
+            "label": "2.16.2"
         },
         {
             "value": "/vue-easytable/2.15.0/",

packages/ve-dropdown/src/index.jsx

@@ -178,6 +178,22 @@ export default {
         value: function () {
             this.init();
         },
+        visible: {
+            handler(visible) {
+                const { isControlled, showDropDown, hideDropDown } = this;
+                // deal after mounted hook
+                setTimeout(() => {
+                    if (isControlled) {
+                        if (visible) {
+                            showDropDown();
+                        } else {
+                            hideDropDown();
+                        }
+                    }
+                });
+            },
+            immediate: true,
+        },
     },
     methods: {
         // 初始化
@@ -220,12 +236,10 @@ export default {
         hideDropDown() {
             this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, false);
 
-            if (!this.isControlled) {
-                setTimeout(() => {
-                    this.internalVisible = false;
-                    this.removeOrEmptyRootPanel();
-                }, 150);
-            }
+            setTimeout(() => {
+                this.internalVisible = false;
+                this.removeOrEmptyRootPanel();
+            }, 150);
         },
 
         // remove or emoty root panel
@@ -255,9 +269,7 @@ export default {
                 this.changDropdownPanelPosition();
             }
 
-            if (!this.isControlled) {
-                this.internalVisible = true;
-            }
+            this.internalVisible = true;
 
             this.$emit(EMIT_EVENTS.VISIBLE_CHANGE, true);
         },
@@ -427,7 +439,7 @@ export default {
         },
 
         /*
-        add root contextmenu panel to element
+        add root element to element
         如果不指定则添加到 body
         */
         addRootElementToElement() {

tests/unit/specs/ve-table-header-filter-custom.spec.js

@@ -44,6 +44,15 @@ describe("veTable header filter custom", () => {
         },
     ];
 
+    afterEach(() => {
+        return new Promise((resolve) => {
+            const poppers = document.querySelector(".ve-dropdown-popper");
+            poppers && poppers.remove();
+
+            resolve();
+        });
+    });
+
     it("render", () => {
         const wrapper = mount({
             render() {
@@ -232,14 +241,26 @@ describe("veTable header filter custom", () => {
         expect(wrapper.find(".icon-vet-filter").exists()).toBe(true);
 
         wrapper.find(".ve-table-filter-icon").trigger("click");
-        await later();
-        expect(wrapper.find(".ve-dropdown-dd-show").exists()).toBe(true);
+        // 延迟展示
+        await later(100);
+
+        const showDropdownPopper = document.querySelector(
+            ".ve-dropdown-popper > .ve-dropdown-dd",
+        );
+
+        expect(showDropdownPopper.textContent.length).toBeGreaterThan(1);
+
+        const cancelClickEvent = new MouseEvent("click", {
+            view: window, // window
+            bubbles: true,
+            cancelable: true,
+        });
+
+        document
+            .querySelector(".name-filter-cancel")
+            .dispatchEvent(cancelClickEvent);
 
-        wrapper.find(".name-filter-confirm").trigger("click");
         expect(mockFilterFn).toBeCalled();
         expect(mockFilterFn).toHaveBeenCalledWith(expect.any(Function));
-
-        await later();
-        expect(wrapper.find(".ve-dropdown-dd-show").exists()).toBe(false);
     });
 });