fix: onClear triggers onDeselect in multiple mode (#731)

* fix: onClear triggers onDeselect in multiple mode

* test: add test

Author: madocto

src/BaseSelect.tsx

@@ -43,6 +43,8 @@ export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 
 export type RawValueType = string | number;
 
+export type DisplayInfoType = 'add' | 'remove' | 'clear';
+
 export interface RefOptionListProps {
   onKeyDown: React.KeyboardEventHandler;
   onKeyUp: React.KeyboardEventHandler;
@@ -82,7 +84,7 @@ export interface BaseSelectPrivateProps {
   onDisplayValuesChange: (
     values: DisplayValueType[],
     info: {
-      type: 'add' | 'remove' | 'clear';
+      type: DisplayInfoType;
       values: DisplayValueType[];
     },
   ) => void;

src/Select.tsx

@@ -36,6 +36,7 @@ import type {
   BaseSelectProps,
   BaseSelectPropsWithoutPrivate,
   BaseSelectRef,
+  DisplayInfoType,
   DisplayValueType,
   RenderNode,
 } from './BaseSelect';
@@ -455,7 +456,7 @@ const Select = React.forwardRef(
     );
 
     // ========================= OptionList =========================
-    const triggerSelect = (val: RawValueType, selected: boolean) => {
+    const triggerSelect = (val: RawValueType, selected: boolean, type?: DisplayInfoType) => {
       const getSelectEnt = (): [RawValueType | LabelInValueType, DefaultOptionType] => {
         const option = getMixedOption(val);
         return [
@@ -473,7 +474,7 @@ const Select = React.forwardRef(
       if (selected && onSelect) {
         const [wrappedValue, option] = getSelectEnt();
         onSelect(wrappedValue, option);
-      } else if (!selected && onDeselect) {
+      } else if (!selected && onDeselect && type !== 'clear') {
         const [wrappedValue, option] = getSelectEnt();
         onDeselect(wrappedValue, option);
       }
@@ -509,10 +510,11 @@ const Select = React.forwardRef(
     // BaseSelect display values change
     const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (nextValues, info) => {
       triggerChange(nextValues);
+      const { type, values } = info;
 
-      if (info.type === 'remove' || info.type === 'clear') {
-        info.values.forEach((item) => {
-          triggerSelect(item.value, false);
+      if (type === 'remove' || type === 'clear') {
+        values.forEach((item) => {
+          triggerSelect(item.value, false, type);
         });
       }
     };

tests/shared/allowClearTest.tsx

@@ -11,6 +11,7 @@ export default function allowClearTest(mode: any, value: any) {
     it('clears value', () => {
       const onClear = jest.fn();
       const onChange = jest.fn();
+      const onDeselect = jest.fn();
       const useArrayValue = ['tags', 'multiple'].includes(mode);
       const wrapper = mount(
         <Select
@@ -19,6 +20,7 @@ export default function allowClearTest(mode: any, value: any) {
           mode={mode}
           onClear={onClear}
           onChange={onChange}
+          onDeselect={onDeselect}
         >
           <Option value="1">1</Option>
           <Option value="2">2</Option>
@@ -31,15 +33,13 @@ export default function allowClearTest(mode: any, value: any) {
 
       // enabled
       wrapper.setProps({ disabled: false });
-      wrapper
-        .find('.rc-select-clear')
-        .last()
-        .simulate('mousedown');
+      wrapper.find('.rc-select-clear').last().simulate('mousedown');
       if (useArrayValue) {
         expect(onChange).toHaveBeenCalledWith([], []);
       } else {
         expect(onChange).toHaveBeenCalledWith(undefined, undefined);
       }
+      expect(onDeselect).not.toBeCalled();
       expect(wrapper.find('input').props().value).toEqual('');
       expect(onClear).toHaveBeenCalled();
     });