chore: memo of it (#407)

Author: zombieJ

examples/search.tsx

@@ -13,13 +13,13 @@ const addressOptions = [
         value: 'fuzhou',
         children: [
           {
-            label: '马尾',
+            label: '马尾-mw',
             value: 'mawei',
           },
         ],
       },
       {
-        label: '泉州',
+        label: '泉州-qz',
         value: 'quanzhou',
       },
     ],
@@ -68,7 +68,9 @@ const addressOptions = [
 
 class Demo extends React.Component {
   render() {
-    return <Cascader options={addressOptions} showSearch />;
+    return (
+      <Cascader options={addressOptions} showSearch style={{ width: 300 }} animation="slide-up" />
+    );
   }
 }
 

src/OptionList/CacheContent.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface CacheContentProps {
+  children?: React.ReactNode;
+  open?: boolean;
+}
+
+const CacheContent = React.memo(
+  ({ children }: CacheContentProps) => children as React.ReactElement,
+  (_, next) => !next.open,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CacheContent.displayName = 'CacheContent';
+}
+
+export default CacheContent;

src/OptionList/index.tsx

@@ -14,12 +14,13 @@ import {
   toPathValueStr,
 } from '../utils/commonUtil';
 import { toPathOptions } from '../utils/treeUtil';
+import CacheContent from './CacheContent';
 import Column, { FIX_LABEL } from './Column';
 import useActive from './useActive';
 import useKeyboard from './useKeyboard';
 
 const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
-  const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction } =
+  const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open } =
     useBaseProps();
 
   const containerRef = React.useRef<HTMLDivElement>();
@@ -213,15 +214,17 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
 
   // >>>>> Render
   return (
-    <div
-      className={classNames(`${mergedPrefixCls}-menus`, {
-        [`${mergedPrefixCls}-menu-empty`]: isEmpty,
-        [`${mergedPrefixCls}-rtl`]: rtl,
-      })}
-      ref={containerRef}
-    >
-      {columnNodes}
-    </div>
+    <CacheContent open={open}>
+      <div
+        className={classNames(`${mergedPrefixCls}-menus`, {
+          [`${mergedPrefixCls}-menu-empty`]: isEmpty,
+          [`${mergedPrefixCls}-rtl`]: rtl,
+        })}
+        ref={containerRef}
+      >
+        {columnNodes}
+      </div>
+    </CacheContent>
   );
 });
 

tests/search.spec.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 
-import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
-import { mount, ReactWrapper } from './enzyme';
+import React from 'react';
 import Cascader from '../src';
 import { optionsForActiveMenuItems } from './demoOptions';
+import { mount, ReactWrapper } from './enzyme';
 
 describe('Cascader.Search', () => {
   function doSearch(wrapper: ReactWrapper, search: string) {
@@ -244,4 +245,23 @@ describe('Cascader.Search', () => {
     wrapper.find('input').simulate('change', { target: { value: 'z' } });
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/41810
+  it('not back to options when selected', () => {
+    const { container } = render(<Cascader options={options} showSearch />);
+
+    // Search
+    fireEvent.change(container.querySelector('input'), {
+      target: {
+        value: 'bamboo',
+      },
+    });
+
+    // Click
+    fireEvent.click(document.querySelector('.rc-cascader-menu-item-content'));
+    expect(document.querySelector('.rc-cascader-dropdown-hidden')).toBeTruthy();
+    expect(document.querySelector('.rc-cascader-menu-item-content').textContent).toBe(
+      'Label Bamboo / Label Little / Toy Fish',
+    );
+  });
 });