style: optimize cascader clear animation (#26186)

* style: optimize cascader clear animation

* fix test

* style: optimize cascader clear animation

* fix test

* add clearTimeout

* add test

* add clearTimeout

components/cascader/__tests__/index.test.js

@@ -6,6 +6,7 @@ import ConfigProvider from '../../config-provider';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { sleep } from '../../../tests/utils';
 
 const options = [
   {
@@ -186,11 +187,18 @@ describe('Cascader', () => {
     expect(popupWrapper).toMatchSnapshot();
   });
 
-  it('should support to clear selection', () => {
+  it('should support to clear selection', async () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
+    const willUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
+    const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou');
     wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
+    await sleep(300);
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('');
+    wrapper.unmount();
+    expect(willUnmount).toHaveBeenCalled();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    clearTimeoutSpy.mockRestore();
   });
 
   it('should close popup when clear selection', () => {

components/cascader/index.tsx

@@ -109,7 +109,7 @@ export interface CascaderProps {
   /** use this after antd@3.7.0 */
   fieldNames?: FieldNamesType;
   suffixIcon?: React.ReactNode;
-  dropdownRender?: (menus: React.ReactNode) => React.ReactNode
+  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;
 }
 
 export interface CascaderState {
@@ -255,6 +255,8 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
   cachedOptions: CascaderOptionType[] = [];
 
+  clearSelectionTimeout: any;
+
   private input: Input;
 
   constructor(props: CascaderProps) {
@@ -269,6 +271,12 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     };
   }
 
+  componentWillUnmount() {
+    if (this.clearSelectionTimeout) {
+      clearTimeout(this.clearSelectionTimeout);
+    }
+  }
+
   setValue = (value: CascaderValueType, selectedOptions: CascaderOptionType[] = []) => {
     if (!('value' in this.props)) {
       this.setState({ value });
@@ -354,8 +362,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     e.preventDefault();
     e.stopPropagation();
     if (!inputValue) {
-      this.setValue([]);
       this.handlePopupVisibleChange(false);
+      this.clearSelectionTimeout = setTimeout(() => {
+        this.setValue([]);
+      }, 200);
     } else {
       this.setState({ inputValue: '' });
     }