fix: remove onMouseDown to resolve popover close

react-component · Mar 23, 2021 · 287c212 · 287c212
1 parent 45856a8
commit 287c212
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -4,15 +4,15 @@ import classNames from 'classnames';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import Overflow from 'rc-overflow';
 import TransBtn from '../TransBtn';
-import {
+import type {
   LabelValueType,
   DisplayLabelValueType,
   RawValueType,
   CustomTagProps,
   DefaultValueType,
 } from '../interface/generator';
-import { RenderNode } from '../interface';
-import { InnerSelectorProps } from '.';
+import type { RenderNode } from '../interface';
+import type { InnerSelectorProps } from '.';
 import Input from './Input';
 import useLayoutEffect from '../hooks/useLayoutEffect';
 
@@ -35,11 +35,7 @@ interface SelectorProps extends InnerSelectorProps {
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
 }
 
-const onPreventMouseDown = (event: React.MouseEvent) => {
-  event.preventDefault();
-  event.stopPropagation();
-};
-const SelectSelector: React.FC<SelectorProps> = props => {
+const SelectSelector: React.FC<SelectorProps> = (props) => {
   const {
     id,
     prefixCls,
@@ -107,7 +103,6 @@ const SelectSelector: React.FC<SelectorProps> = props => {
         {closable && (
           <TransBtn
             className={`${selectionPrefixCls}-item-remove`}
-            onMouseDown={onPreventMouseDown}
             onClick={onClose}
             customizeIcon={removeIcon}
           >
@@ -125,8 +120,7 @@ const SelectSelector: React.FC<SelectorProps> = props => {
     closable: boolean,
     onClose: React.MouseEventHandler,
   ) {
-    const onMouseDown = (e: React.MouseEvent) => {
-      onPreventMouseDown(e);
+    const onMouseDown = () => {
       onToggleOpen(true);
     };
 

diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx
@@ -224,15 +224,19 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
 
   const onMouseDown: React.MouseEventHandler<HTMLElement> = (event) => {
     const inputMouseDown = getInputMouseDown();
-    if (event.target !== inputRef.current && !inputMouseDown) {
-      event.preventDefault();
-    }
+    const tagCloseMouseDown = (event.target as HTMLElement).innerText === '×';
+
+    if (!tagCloseMouseDown) {
+      if (event.target !== inputRef.current && !inputMouseDown) {
+        event.preventDefault();
+      }
 
-    if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
-      if (open) {
-        onSearch('', true, false);
+      if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
+        if (open) {
+          onSearch('', true, false);
+        }
+        onToggleOpen();
       }
-      onToggleOpen();
     }
   };
 

diff --git a/tests/utils/common.ts b/tests/utils/common.ts
@@ -15,10 +15,7 @@ export function toggleOpen(wrapper: any) {
 }
 
 export function selectItem(wrapper: any, index: number = 0) {
-  wrapper
-    .find('div.rc-select-item-option-content')
-    .at(index)
-    .simulate('click');
+  wrapper.find('div.rc-select-item-option-content').at(index).simulate('click');
 }
 
 export function findSelection(wrapper: any, index: number = 0) {
@@ -33,17 +30,12 @@ export function findSelection(wrapper: any, index: number = 0) {
 }
 
 export function removeSelection(wrapper: any, index: number = 0) {
-  const preventDefault = jest.fn();
-
   wrapper
     .find('.rc-select-selection-item')
     .at(index)
     .find('.rc-select-selection-item-remove')
     .last()
-    .simulate('mousedown', { preventDefault })
     .simulate('click');
-
-  expect(preventDefault).toHaveBeenCalled();
 }
 
 type Jest = typeof jest;