fix: select focus not work

antdv-demo

@@ -1 +1 @@
-Subproject commit f6f5907aa1495eca8086137888e935b681ce2fdb
+Subproject commit be6191e05ba4d7fc25413373659aaed84eb4c6d7

components/select/__tests__/__snapshots__/index.test.js.snap

@@ -1,9 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select Select Custom Icons should support customized icons 1`] = `
-<div tabindex="0" class="ant-select ant-select-enabled">
+<!---->
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+<div class="ant-select ant-select-enabled" tabindex="0">
-    <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+    <div class="ant-select-selection__rendered">
+      <!---->
+      <!---->
+    </div>
+    <!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
   </div>
 </div>
 `;
+
+exports[`Select should not have notFoundContent when mode is combobox and notFoundContent is set 1`] = `"not at all<!---->"`;

components/select/__tests__/index.test.js

@@ -4,10 +4,29 @@ import Select from '..';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
+function $$(className) {
+  return document.body.querySelectorAll(className);
+}
+function getStyle(el, prop) {
+  const style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle;
 
+  // If a css property's value is `auto`, it will return an empty string.
+  return prop ? style[prop] : style;
+}
 describe('Select', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
   focusTest(Select);
-  mountTest(Select);
+  mountTest({
+    render() {
+      return (
+        <div>
+          <Select />
+        </div>
+      );
+    },
+  });
 
   it('should have default notFoundContent', async () => {
     const wrapper = mount(Select, {
@@ -15,27 +34,17 @@ describe('Select', () => {
         mode: 'multiple',
       },
       sync: false,
+      attachTo: 'body',
     });
     await asyncExpect(() => {
       wrapper.find('.ant-select').trigger('click');
     });
-    const dropdownWrapper = mount(
-      {
-        render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-        },
-      },
-      { sync: false },
-    );
 
     await asyncExpect(() => {
-      expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(1);
+      expect($$('.ant-select-dropdown-menu-item').length).toBe(1);
-      expect(
+      expect($$('.ant-select-dropdown-menu-item .ant-empty-description')[0].innerHTML).toBe(
-        dropdownWrapper
+        'No Data',
-          .findAll({ name: 'MenuItem' })
+      );
-          .at(0)
-          .text(),
-      ).toBe('No Data');
     });
   });
 
@@ -46,20 +55,14 @@ describe('Select', () => {
         notFoundContent: null,
       },
       sync: false,
+      attachTo: 'body',
     });
     await asyncExpect(() => {
       wrapper.find('.ant-select').trigger('click');
     });
-    const dropdownWrapper = mount(
+
-      {
-        render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-        },
-      },
-      { sync: false },
-    );
     await asyncExpect(() => {
-      expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(0);
+      expect($$('.ant-select-dropdown-menu-item').length).toBe(0);
     });
   });
 
@@ -69,21 +72,14 @@ describe('Select', () => {
         mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
       },
       sync: false,
+      attachTo: 'body',
     });
     await asyncExpect(() => {
       wrapper.find('.ant-select').trigger('click');
     });
 
-    const dropdownWrapper = mount(
-      {
-        render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-        },
-      },
-      { sync: false },
-    );
     await asyncExpect(() => {
-      expect(dropdownWrapper.findAll('MenuItem').length).toBe(0);
+      expect($$('.ant-select-dropdown-menu-item').length).toBe(0);
     });
   });
 
@@ -99,22 +95,9 @@ describe('Select', () => {
       wrapper.find('.ant-select').trigger('click');
     });
 
-    const dropdownWrapper = mount(
-      {
-        render() {
-          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
-        },
-      },
-      { sync: false },
-    );
     await asyncExpect(() => {
-      expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(1);
+      expect($$('.ant-select-dropdown-menu-item').length).toBe(1);
-      expect(
+      expect($$('.ant-select-dropdown-menu-item')[0].innerHTML).toMatchSnapshot();
-        dropdownWrapper
-          .findAll({ name: 'MenuItem' })
-          .at(0)
-          .text(),
-      ).toBe('not at all');
     });
   });
 
@@ -131,52 +114,32 @@ describe('Select', () => {
         render() {
           return (
             <Select open={this.open} onDropdownVisibleChange={onDropdownVisibleChange}>
-              <Option value="1">1</Option>
+              <Select.Option value="1">1</Select.Option>
             </Select>
           );
         },
       },
-      { sync: false },
+      { sync: false, attachTo: 'body' },
-    );
-    let triggerComponent = null;
-    mount(
-      {
-        render() {
-          triggerComponent = wrapper.find({ name: 'Trigger' }).vm.getComponent();
-          return triggerComponent;
-        },
-      },
-      { sync: false },
     );
+
     await asyncExpect(() => {
-      // console.log(triggerComponent.componentInstance.visible)
+      expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('block');
-      expect(triggerComponent.componentInstance.visible).toBe(true);
     });
     await asyncExpect(() => {
       wrapper.find('.ant-select').trigger('click');
       expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
     });
     await asyncExpect(() => {
-      expect(triggerComponent.componentInstance.visible).toBe(true);
+      expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('block');
       wrapper.setProps({ open: false });
     });
+
     await asyncExpect(() => {
-      mount(
+      expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('none');
-        {
-          render() {
-            triggerComponent = wrapper.find({ name: 'Trigger' }).vm.getComponent();
-            return triggerComponent;
-          },
-        },
-        { sync: false },
-      );
-    });
-    await asyncExpect(() => {
-      expect(triggerComponent.componentInstance.visible).toBe(false);
       wrapper.find('.ant-select').trigger('click');
       expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
-      expect(triggerComponent.componentInstance.visible).toBe(false);
+      expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('none');
-    });
+    }, 500);
   });
 
   describe('Select Custom Icons', () => {
@@ -189,7 +152,7 @@ describe('Select', () => {
               clearIcon={<CloseOutlined />}
               menuItemSelectedIcon={<CloseOutlined />}
             >
-              <Option value="1">1</Option>
+              <Select.Option value="1">1</Select.Option>
             </Select>
           );
         },

components/select/index.jsx

@@ -4,13 +4,7 @@ import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import { Select as VcSelect, Option, OptGroup } from '../vc-select';
 import { ConfigConsumerProps } from '../config-provider';
-import {
+import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
-  getComponent,
-  getOptionProps,
-  filterEmpty,
-  isValidElement,
-  getSlot,
-} from '../_util/props-util';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@@ -244,14 +238,14 @@ const Select = {
       placeholder: getComponent(this, 'placeholder'),
       children: options
         ? options.map(option => {
-            const { key, label = option.title, on, class: cls, style, ...restOption } = option;
+            const { key, label = option.title, class: cls, style, ...restOption } = option;
             return (
-              <Option key={key} {...{ on, class: cls, style, ...restOption }}>
+              <Option key={key} {...{ class: cls, style, ...restOption }}>
                 {label}
               </Option>
             );
           })
-        : filterEmpty(getSlot(this)),
+        : getSlot(this),
       __propsSymbol__: Symbol(),
       dropdownRender: getComponent(this, 'dropdownRender', {}, false),
       getPopupContainer: getPopupContainer || getContextPopupContainer,

components/vc-select/Select.jsx

@@ -1486,17 +1486,8 @@ const Select = {
         }
       }
     },
-    selectionRefFocus() {
+    selectionRefFocus(e) {
-      if (this.getInputDOMNode() && this.getInputDOMNode()) {
+      this.inputFocus(e);
-        this.getInputDOMNode().focus();
-      }
-      // if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
-      //   e.preventDefault();
-      //   return;
-      // }
-      // this._focused = true;
-      // this.updateFocusClassName();
-      // this.__emit('focus');
     },
     selectionRefBlur(e) {
       if (isMultipleOrTagsOrCombobox(this.$props)) {

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/tag/demo/basic';
+import demo from '../antdv-demo/docs/select/demo/index';
 
 export default {
   components: {