fix: delay to close in combobox (#402)

* delay to close in combobox

* update package.json

* clean up

Author: zombieJ

package.json

@@ -28,9 +28,9 @@
     "port": 8003
   },
   "scripts": {
-    "build": "rc-tools run storybook-build",
+    "build": "rc-tools run build",
     "compile": "rc-tools run compile --babel-runtime",
-    "gh-pages": "npm run build && rc-tools run storybook-gh-pages",
+    "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run storybook",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
@@ -39,10 +39,8 @@
     "test": "rc-tools run test",
     "prepublish": "rc-tools run guard",
     "init-tslint": "rc-tools run gen-lint-config",
-    "init-storybook": "rc-tools run genStorybook",
     "coverage": "rc-tools run test --coverage",
     "pre-commit": "rc-tools run pre-commit",
-    "storybook": "rc-tools run storybook",
     "lint-staged": "lint-staged",
     "now-build": "npm run build"
   },

src/Select.tsx

@@ -233,6 +233,7 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
   public dropdownContainer: Element | null = null;
   public blurTimer: number | null = null;
   public focusTimer: number | null = null;
+  public comboboxTimer: number | null = null;
 
   // tslint:disable-next-line:variable-name
   private _focused: boolean = false;
@@ -304,6 +305,7 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
   public componentWillUnmount() {
     this.clearFocusTime();
     this.clearBlurTime();
+    this.clearComboboxTime();
     if (this.dropdownContainer) {
       ReactDOM.unmountComponentAtNode(this.dropdownContainer);
       document.body.removeChild(this.dropdownContainer);
@@ -371,7 +373,7 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
   };
 
   public onInputKeyDown = (event: React.ChangeEvent<HTMLInputElement> | KeyboardEvent) => {
-    const { disabled, combobox } = this.props;
+    const { disabled, combobox, defaultActiveFirstOption } = this.props;
     if (disabled) {
       return;
     }
@@ -406,6 +408,13 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
       if (isRealOpen || !combobox) {
         event.preventDefault();
       }
+
+      // Hard close popup to avoid lock of non option in combobox mode
+      if (isRealOpen && combobox && defaultActiveFirstOption === false) {
+        this.comboboxTimer = setTimeout(() => {
+          this.setOpenState(false);
+        });
+      }
     } else if (keyCode === KeyCode.ESC) {
       if (state.open) {
         this.setOpenState(false);
@@ -800,6 +809,7 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
       backfillValue: '',
     };
     // clear search input value when open is false in singleMode.
+    // https://github.com/ant-design/ant-design/issues/16572
     if (!open && isSingleMode(props) && props.showSearch) {
       this.setInputValue('', fireSearch);
     }
@@ -961,6 +971,13 @@ class Select extends React.Component<Partial<ISelectProps>, ISelectState> {
     }
   };
 
+  public clearComboboxTime = () => {
+    if (this.comboboxTimer) {
+      clearTimeout(this.comboboxTimer);
+      this.comboboxTimer = null;
+    }
+  };
+
   public updateFocusClassName = () => {
     const rootRef = this.rootRef;
     const props = this.props;

tests/Select.combobox.spec.tsx

@@ -374,4 +374,28 @@ describe('Select.combobox', () => {
       .simulate('click');
     expect(wrapper.find('input').prop('value')).toBe('xxx-1');
   });
+
+  // https://github.com/ant-design/ant-design/issues/16572
+  it('close when enter press without active option', () => {
+    jest.useFakeTimers();
+
+    const onDropdownVisibleChange = jest.fn();
+
+    const wrapper = mount<Select>(
+      <Select combobox={true} open={true} onDropdownVisibleChange={onDropdownVisibleChange}>
+        <Option value="One">One</Option>
+        <Option value="Two">Two</Option>
+      </Select>,
+    );
+
+    wrapper.find('input').simulate('keyDown', {
+      keyCode: KeyCode.ENTER,
+    });
+
+    jest.runAllTimers();
+    wrapper.update();
+    expect(onDropdownVisibleChange).toBeCalledWith(false);
+
+    jest.useRealTimers();
+  });
 });