fix: when click clear button, it will be focused (#812)

* fix: when click clear button, it will be focused

* fix: remove duplicate code

* fix: attachTo body can trigger event propagation

Author: Pulset

src/BaseSelect.tsx

@@ -694,6 +694,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   const onClearMouseDown: React.MouseEventHandler<HTMLSpanElement> = () => {
     onClear?.();
 
+    selectorRef.current?.focus();
+
     onDisplayValuesChange([], {
       type: 'clear',
       values: displayValues,

tests/Select.test.tsx

@@ -1949,4 +1949,29 @@ describe('Select.Basic', () => {
       expect(wrapper.find('span.rc-select-selection-item').at(2).prop('title')).toEqual('+ 1 ...');
     });
   });
+
+  it('should be focused when click clear button', () => {
+    jest.useFakeTimers();
+
+    const mouseDownPreventDefault = jest.fn();
+    const wrapper = mount(
+      <Select allowClear value="1">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+      {
+        attachTo: document.body,
+      },
+    );
+
+    expect(wrapper.find('.rc-select-clear-icon').length).toBeTruthy();
+
+    wrapper
+      .find('.rc-select-clear-icon')
+      .simulate('mouseDown', { preventDefault: mouseDownPreventDefault });
+    jest.runAllTimers();
+
+    expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focused');
+    jest.useRealTimers();
+  });
 });