diff --git a/package.json b/package.json index 634cc93d4..b00a54aa0 100644 --- a/package.json +++ b/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" }, diff --git a/src/Select.tsx b/src/Select.tsx index 098be896c..56ce915fa 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -233,6 +233,7 @@ class Select extends React.Component, 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, 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, ISelectState> { }; public onInputKeyDown = (event: React.ChangeEvent | KeyboardEvent) => { - const { disabled, combobox } = this.props; + const { disabled, combobox, defaultActiveFirstOption } = this.props; if (disabled) { return; } @@ -406,6 +408,13 @@ class Select extends React.Component, 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, 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, ISelectState> { } }; + public clearComboboxTime = () => { + if (this.comboboxTimer) { + clearTimeout(this.comboboxTimer); + this.comboboxTimer = null; + } + }; + public updateFocusClassName = () => { const rootRef = this.rootRef; const props = this.props; diff --git a/tests/Select.combobox.spec.tsx b/tests/Select.combobox.spec.tsx index f75e1fb77..f2bd83363 100644 --- a/tests/Select.combobox.spec.tsx +++ b/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 + + + , + ); + + wrapper.find('input').simulate('keyDown', { + keyCode: KeyCode.ENTER, + }); + + jest.runAllTimers(); + wrapper.update(); + expect(onDropdownVisibleChange).toBeCalledWith(false); + + jest.useRealTimers(); + }); });