fix: Combobox click logic & open status (#458)

* fix it

* lazy set open state

* fix test

* add one more test case

* not close when autoComplete mode

* add test case

Author: zombieJ

package.json

@@ -45,7 +45,7 @@
     "classnames": "2.x",
     "rc-animate": "^2.10.0",
     "rc-trigger": "^4.0.0",
-    "rc-util": "^4.17.0",
+    "rc-util": "^4.20.0",
     "rc-virtual-list": "^1.0.0",
     "warning": "^4.0.3"
   },

src/Selector/index.tsx

@@ -107,6 +107,8 @@ const Selector: React.RefForwardingComponent<
   const {
     prefixCls,
     multiple,
+    open,
+    mode,
 
     onSearch,
     onToggleOpen,
@@ -179,7 +181,9 @@ const Selector: React.RefForwardingComponent<
       event.preventDefault();
     }
 
-    onToggleOpen();
+    if (mode !== 'combobox' || !open) {
+      onToggleOpen();
+    }
   };
 
   // ================= Inner Selector ==================

src/generate.tsx

@@ -10,6 +10,7 @@
 import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import Selector, { RefSelectorProps } from './Selector';
 import SelectTrigger, { RefTriggerProps } from './SelectTrigger';
 import { RenderNode, Mode, RenderDOMFunc } from './interface';
@@ -632,21 +633,24 @@ export default function generateSelector<
       (mode === 'combobox' && getInputElement && getInputElement()) || null;
 
     // ============================== Open ==============================
-    const [innerOpen, setInnerOpen] = React.useState<boolean>(defaultOpen);
-    let mergedOpen: boolean =
-      !disabled && (open !== undefined ? open : innerOpen);
+    const [innerOpen, setInnerOpen] = useMergedState<boolean>(undefined, {
+      defaultValue: defaultOpen,
+      value: open,
+    });
+
+    let mergedOpen = innerOpen;
 
     // Not trigger `open` in `combobox` when `notFoundContent` is empty
     const emptyListContent = !notFoundContent && !displayOptions.length;
-    if (emptyListContent && mergedOpen && mode === 'combobox') {
+    if (disabled || (emptyListContent && mergedOpen && mode === 'combobox')) {
       mergedOpen = false;
     }
     const triggerOpen = emptyListContent ? false : mergedOpen;
 
     const onToggleOpen = (newOpen?: boolean) => {
       const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
 
-      if (mergedOpen !== nextOpen && !disabled) {
+      if (innerOpen !== nextOpen && !disabled) {
         setInnerOpen(nextOpen);
 
         if (onDropdownVisibleChange) {

tests/Combobox.test.tsx

@@ -15,6 +15,12 @@ import {
 import allowClearTest from './shared/allowClearTest';
 import throwOptionValue from './shared/throwOptionValue';
 
+async function delay(timeout = 0) {
+  return new Promise(resolve => {
+    setTimeout(resolve, timeout);
+  });
+}
+
 describe('Select.Combobox', () => {
   injectRunAllTimers(jest);
 
@@ -147,7 +153,7 @@ describe('Select.Combobox', () => {
 
         public render() {
           const options = this.state.data.map(item => (
-            <Option key={item.key}>{item.label}</Option>
+            <Option value={item.key}>{item.label}</Option>
           ));
           return (
             <Select
@@ -188,7 +194,7 @@ describe('Select.Combobox', () => {
 
         public render() {
           const options = this.state.data.map(item => (
-            <Option key={item.key}>{item.label}</Option>
+            <Option value={item.key}>{item.label}</Option>
           ));
           return (
             <Select
@@ -300,7 +306,7 @@ describe('Select.Combobox', () => {
         return (
           <Select mode="combobox" onChange={this.updateOptions}>
             {this.state.options.map(opt => (
-              <Option key={opt}>{opt}</Option>
+              <Option value={opt}>{opt}</Option>
             ))}
           </Select>
         );
@@ -369,4 +375,28 @@ describe('Select.Combobox', () => {
 
     expect(wrapper.find('input').props().value).toEqual('');
   });
+
+  it('should keep close after blur', async () => {
+    const wrapper = mount(
+      <Select mode="combobox" notFoundContent={null}>
+        <Option value="One">One</Option>
+      </Select>,
+    );
+
+    toggleOpen(wrapper);
+    expectOpen(wrapper);
+
+    // Click again should not close popup
+    for (let i = 0; i < 10; i += 1) {
+      wrapper.find('input').simulate('mouseDown');
+      wrapper.update();
+      expectOpen(wrapper);
+    }
+
+    wrapper.find('input').simulate('blur');
+    await delay(100);
+
+    wrapper.update();
+    expectOpen(wrapper, false);
+  });
 });

tests/Select.test.tsx

@@ -1465,7 +1465,7 @@ describe('Select.Basic', () => {
   });
 
   describe('disabled on open', () => {
-    it('should not show dropdown when oepn and disabled', () => {
+    it('should not show dropdown when open and disabled', () => {
       const wrapper = mount(
         <Select open disabled>
           <Option value="1">1</Option>
@@ -1485,6 +1485,7 @@ describe('Select.Basic', () => {
       toggleOpen(wrapper);
       expectOpen(wrapper, true);
       wrapper.setProps({ disabled: true });
+      wrapper.update();
       expectOpen(wrapper, false);
     });
 
@@ -1497,7 +1498,9 @@ describe('Select.Basic', () => {
       );
       toggleOpen(wrapper);
       wrapper.setProps({ disabled: true });
+      wrapper.update();
       wrapper.setProps({ disabled: false });
+      wrapper.update();
       expectOpen(wrapper, false);
     });
   });