fix[Select]: fix select losing focus issue (#7829)

vueComponent · Nov 8, 2024 · 22dad3b · 22dad3b
1 parent 4f7bd6f
commit 22dad3b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js
@@ -159,6 +159,52 @@ describe('Select', () => {
     }, 500);
   });
 
+  it('The select trigger should be blur when the panel is closed.', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return (
+            <Select
+              dropdownRender={() => {
+                return <input id="dropdownRenderInput" />;
+              }}
+            />
+          );
+        },
+      },
+      {
+        sync: false,
+        attachTo: 'body',
+      },
+    );
+    await asyncExpect(async () => {
+      await wrapper.find('.ant-select-selector').trigger('mousedown');
+      await wrapper.find('.ant-select-selection-search-input').trigger('focus');
+    });
+
+    await asyncExpect(async () => {
+      const el = wrapper.find('.ant-select');
+
+      expect(el.classes()).toContain('ant-select-focused');
+      $$('#dropdownRenderInput')[0].focus();
+
+      expect(el.classes()).toContain('ant-select-focused');
+
+      document.body.dispatchEvent(
+        new MouseEvent('mousedown', {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        }),
+      );
+    }, 100);
+
+    await asyncExpect(async () => {
+      const el = wrapper.find('.ant-select');
+      expect(el.classes()).not.toContain('ant-select-focused');
+    }, 200);
+  });
+
   describe('Select Custom Icons', () => {
     it('should support customized icons', () => {
       const wrapper = mount({

diff --git a/components/vc-select/BaseSelect.tsx b/components/vc-select/BaseSelect.tsx
@@ -343,6 +343,14 @@ export default defineComponent({
       if (mergedOpen.value !== nextOpen && !props.disabled) {
         setInnerOpen(nextOpen);
         props.onDropdownVisibleChange && props.onDropdownVisibleChange(nextOpen);
+
+        if (!nextOpen && popupFocused.value) {
+          popupFocused.value = false;
+          setMockFocused(false, () => {
+            focusRef.value = false;
+            blurRef.value = false;
+          });
+        }
       }
     };