feat: onClear (#523)

* chore: wip

* test: onClear

Author: 07akioni

src/generate.tsx

@@ -88,6 +88,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   showSearch?: boolean;
   autoClearSearchValue?: boolean;
   onSearch?: (value: string) => void;
+  onClear?: OnClear;
 
   // Icons
   allowClear?: boolean;
@@ -304,6 +305,7 @@ export default function generateSelector<
       onChange,
       onSelect,
       onDeselect,
+      onClear,
 
       internalProps = {},
 
@@ -910,6 +912,10 @@ export default function generateSelector<
         internalProps.onClear();
       }
 
+      if (onClear) {
+        onClear();
+      }
+
       triggerChange([]);
       triggerSearch('', false, false);
     };

tests/Select.test.tsx

@@ -10,6 +10,7 @@ import blurTest from './shared/blurTest';
 import keyDownTest from './shared/keyDownTest';
 import inputFilterTest from './shared/inputFilterTest';
 import openControlledTest from './shared/openControlledTest';
+import allowClearTest from './shared/allowClearTest';
 import {
   expectOpen,
   toggleOpen,
@@ -22,6 +23,7 @@ import { INTERNAL_PROPS_MARK } from '../src/interface/generator';
 describe('Select.Basic', () => {
   injectRunAllTimers(jest);
 
+  allowClearTest(undefined, '903');
   focusTest('single', {});
   blurTest('single');
   keyDownTest('single');
@@ -351,42 +353,6 @@ describe('Select.Basic', () => {
     expectOpen(wrapper);
   });
 
-  it('clears value', () => {
-    const handleChange = jest.fn();
-    const onClear = jest.fn();
-
-    const wrapper = mount(
-      <Select
-        value="1"
-        allowClear
-        onChange={handleChange}
-        internalProps={{
-          mark: INTERNAL_PROPS_MARK,
-          onClear,
-        }}
-      >
-        <Option value="1">1</Option>
-        <Option value="2">2</Option>
-      </Select>,
-    );
-
-    wrapper.find('input').simulate('change', { target: { value: 'foo' } });
-
-    // disabled
-    wrapper.setProps({ disabled: true });
-    expect(wrapper.find('.rc-select-clear')).toHaveLength(0);
-
-    // enabled
-    wrapper.setProps({ disabled: false });
-    wrapper
-      .find('.rc-select-clear')
-      .last()
-      .simulate('mousedown');
-    expect(handleChange).toHaveBeenCalledWith(undefined, undefined);
-    expect(wrapper.find('input').props().value).toEqual('');
-    expect(onClear).toHaveBeenCalled();
-  });
-
   it('adds label to value', () => {
     const handleChange = jest.fn();
     const wrapper = mount(

tests/shared/allowClearTest.tsx

@@ -1,12 +1,54 @@
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import * as React from 'react';
-import Select from '../../src';
+import Select, { Option } from '../../src';
+import { INTERNAL_PROPS_MARK } from '../../src/interface/generator';
 
 export default function allowClearTest(mode: any, value: any) {
   describe('allowClear', () => {
     it('renders correctly', () => {
       const wrapper = render(<Select mode={mode} value={value} allowClear />);
       expect(wrapper.find('.rc-select-clear-icon').length).toBeTruthy();
     });
+    it('clears value', () => {
+      const onClear = jest.fn();
+      const internalOnClear = jest.fn();
+      const onChange = jest.fn();
+      const useArrayValue = ['tags', 'multiple'].includes(mode);
+      const wrapper = mount(
+        <Select
+          defaultValue={useArrayValue ? ['1'] : '1'}
+          allowClear
+          mode={mode}
+          onClear={onClear}
+          onChange={onChange}
+          internalProps={{
+            mark: INTERNAL_PROPS_MARK,
+            onClear: internalOnClear,
+          }}
+        >
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
+
+      // disabled
+      wrapper.setProps({ disabled: true });
+      expect(wrapper.find('.rc-select-clear')).toHaveLength(0);
+
+      // enabled
+      wrapper.setProps({ disabled: false });
+      wrapper
+        .find('.rc-select-clear')
+        .last()
+        .simulate('mousedown');
+      if (useArrayValue) {
+        expect(onChange).toHaveBeenCalledWith([], []);
+      } else {
+        expect(onChange).toHaveBeenCalledWith(undefined, undefined);
+      }
+      expect(wrapper.find('input').props().value).toEqual('');
+      expect(onClear).toHaveBeenCalled();
+      expect(internalOnClear).toHaveBeenCalled();
+    });
   });
 }