fix: Cache option for filter (#637)

* fix: Cache option for filter

* chore: fix logic

* chore: fix ts

Author: zombieJ

package.json

@@ -43,7 +43,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/select": "~1.5.0",
+    "@rc-component/select": "~1.5.2",
     "@rc-component/tree": "~1.2.0",
     "@rc-component/util": "^1.4.0",
     "clsx": "^2.1.1"

src/OptionList/CacheContent.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import type { useBaseProps } from '@rc-component/select';
 import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import * as React from 'react';
+import useMemo from '@rc-component/util/lib/hooks/useMemo';
 import type { DefaultOptionType, LegacyKey, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import {
@@ -14,7 +15,6 @@ 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';
@@ -29,7 +29,9 @@ export type RawOptionListProps = Pick<
   | 'direction'
   | 'open'
   | 'disabled'
->;
+> & {
+  lockOptions?: boolean;
+};
 
 const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((props, ref) => {
   const {
@@ -41,6 +43,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
     direction,
     open,
     disabled,
+    lockOptions = false,
   } = props;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -135,14 +138,21 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
   };
 
   // ========================== Option ==========================
-  const mergedOptions = React.useMemo(() => {
+  const filteredOptions = React.useMemo(() => {
     if (searchValue) {
       return searchOptions;
     }
 
     return options;
   }, [searchValue, searchOptions, options]);
 
+  // Update only when open or lockOptions
+  const mergedOptions = useMemo(
+    () => filteredOptions,
+    [open, lockOptions],
+    (prev, next) => !!next[0] && !next[1],
+  );
+
   // ========================== Column ==========================
   const optionColumns = React.useMemo(() => {
     const optionList = [{ options: mergedOptions }];
@@ -246,17 +256,15 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
 
   // >>>>> Render
   return (
-    <CacheContent open={open}>
-      <div
-        className={clsx(`${mergedPrefixCls}-menus`, {
-          [`${mergedPrefixCls}-menu-empty`]: isEmpty,
-          [`${mergedPrefixCls}-rtl`]: rtl,
-        })}
-        ref={containerRef}
-      >
-        {columnNodes}
-      </div>
-    </CacheContent>
+    <div
+      className={clsx(`${mergedPrefixCls}-menus`, {
+        [`${mergedPrefixCls}-menu-empty`]: isEmpty,
+        [`${mergedPrefixCls}-rtl`]: rtl,
+      })}
+      ref={containerRef}
+    >
+      {columnNodes}
+    </div>
   );
 });
 

src/OptionList/List.tsx

@@ -4,10 +4,10 @@ import * as React from 'react';
 import RawOptionList from './List';
 
 const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
-  const baseProps = useBaseProps();
+  const { lockOptions, ...baseProps } = useBaseProps();
 
   // >>>>> Render
-  return <RawOptionList {...props} {...baseProps} ref={ref} />;
+  return <RawOptionList {...props} {...baseProps} lockOptions={lockOptions} ref={ref} />;
 });
 
 export default RefOptionList;