Fix selection trigger open logic

src/Selector/index.tsx

@@ -12,11 +12,7 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import MultipleSelector from './MultipleSelector';
 import SingleSelector from './SingleSelector';
-import {
-  LabelValueType,
-  RawValueType,
-  CustomTagProps,
-} from '../interface/generator';
+import { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator';
 import { RenderNode, Mode } from '../interface';
 import useLock from '../hooks/useLock';
 
@@ -36,15 +32,9 @@ export interface InnerSelectorProps {
   open: boolean;
   tabIndex?: number;
 
-  onInputKeyDown: React.KeyboardEventHandler<
-    HTMLInputElement | HTMLTextAreaElement
-  >;
-  onInputMouseDown: React.MouseEventHandler<
-    HTMLInputElement | HTMLTextAreaElement
-  >;
-  onInputChange: React.ChangeEventHandler<
-    HTMLInputElement | HTMLTextAreaElement
-  >;
+  onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 
 export interface RefSelectorProps {
@@ -75,9 +65,7 @@ export interface SelectorProps {
   // Tags
   maxTagCount?: number;
   maxTagTextLength?: number;
-  maxTagPlaceholder?:
-    | React.ReactNode
-    | ((omittedValues: LabelValueType[]) => React.ReactNode);
+  maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
   tagRender?: (props: CustomTagProps) => React.ReactElement;
 
   // Motion
@@ -87,9 +75,7 @@ export interface SelectorProps {
   /** `onSearch` returns go next step boolean to check if need do toggle open */
   onSearch: (searchValue: string) => boolean;
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
-  onInputKeyDown?: React.KeyboardEventHandler<
-    HTMLInputElement | HTMLTextAreaElement
-  >;
+  onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 
   /**
    * @private get real dom for trigger align.
@@ -98,17 +84,15 @@ export interface SelectorProps {
   domRef: React.Ref<HTMLDivElement>;
 }
 
-const Selector: React.RefForwardingComponent<
-  RefSelectorProps,
-  SelectorProps
-> = (props, ref) => {
+const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> = (props, ref) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const {
     prefixCls,
     multiple,
     open,
     mode,
+    showSearch,
 
     onSearch,
     onToggleOpen,
@@ -130,9 +114,7 @@ const Selector: React.RefForwardingComponent<
   // ====================== Input ======================
   const [getInputMouseDown, setInputMouseDown] = useLock(0);
 
-  const onInternalInputKeyDown: React.KeyboardEventHandler<
-    HTMLInputElement
-  > = event => {
+  const onInternalInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
     const { which } = event;
 
     if (which === KeyCode.UP || which === KeyCode.DOWN) {
@@ -143,11 +125,7 @@ const Selector: React.RefForwardingComponent<
       onInputKeyDown(event);
     }
 
-    if (
-      ![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(
-        which,
-      )
-    ) {
+    if (![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(which)) {
       onToggleOpen(true);
     }
   };
@@ -156,9 +134,7 @@ const Selector: React.RefForwardingComponent<
    * We can not use `findDOMNode` sine it will get warning,
    * have to use timer to check if is input element.
    */
-  const onInternalInputMouseDown: React.MouseEventHandler<
-    HTMLInputElement
-  > = () => {
+  const onInternalInputMouseDown: React.MouseEventHandler<HTMLInputElement> = () => {
     setInputMouseDown(true);
   };
 
@@ -177,11 +153,12 @@ const Selector: React.RefForwardingComponent<
   };
 
   const onMouseDown: React.MouseEventHandler<HTMLElement> = event => {
-    if (event.target !== inputRef.current && !getInputMouseDown()) {
+    const inputMouseDown = getInputMouseDown();
+    if (event.target !== inputRef.current && !inputMouseDown) {
       event.preventDefault();
     }
 
-    if (mode !== 'combobox' || !open) {
+    if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
       onToggleOpen();
     }
   };
@@ -212,9 +189,7 @@ const Selector: React.RefForwardingComponent<
   );
 };
 
-const ForwardSelector = React.forwardRef<RefSelectorProps, SelectorProps>(
-  Selector,
-);
+const ForwardSelector = React.forwardRef<RefSelectorProps, SelectorProps>(Selector);
 ForwardSelector.displayName = 'Selector';
 
 export default ForwardSelector;

tests/Multiple.test.tsx

@@ -145,6 +145,7 @@ describe('Select.Multiple', () => {
     selectItem(wrapper, 1);
 
     toggleOpen(wrapper);
+    expectOpen(wrapper, false);
     removeSelection(wrapper);
     expectOpen(wrapper, false);
     expect(wrapper.find('Selector').props().values).toEqual([

tests/Select.test.tsx

@@ -461,6 +461,20 @@ describe('Select.Basic', () => {
     expect(handleSearch).not.toHaveBeenCalled();
   });
 
+  it('not close when click on the input', () => {
+    const wrapper = mount(
+      <Select showSearch>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+
+    for (let i = 0; i < 10; i += 1) {
+      wrapper.find('input').simulate('mousedown');
+      expectOpen(wrapper);
+    }
+  });
+
   // Should always trigger search event:
   // https://github.com/ant-design/ant-design/issues/16223
   // https://github.com/ant-design/ant-design/issues/10817