From e230c2ddb24e70ce52b360e3b0ef828cf309d697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 21 Nov 2024 21:47:15 +0800
Subject: [PATCH] fix: cache of loading

---
 src/OptionList.tsx             | 12 +++++++---
 tests/Select.loadData.spec.tsx | 41 +++++++++++++---------------------
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index aaa9d0ee..04c0f27b 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -243,9 +243,15 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
 
   const loadDataFun = useMemo(
     () => (searchValue ? null : (loadData as any)),
-    [searchValue, treeExpandedKeys || expandedKeys],
-    ([preSearchValue], [nextSearchValue, nextExcludeSearchExpandedKeys]) =>
-      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys),
+    [loadData, searchValue, treeExpandedKeys || expandedKeys],
+    (
+      [prevLoadData, preSearchValue],
+      [nextLoadData, nextSearchValue, nextExcludeSearchExpandedKeys],
+    ) =>
+      // `loadData` changed
+      prevLoadData !== nextLoadData ||
+      // `searchValue` changed and not in search mode
+      (preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys)),
   );
 
   // ========================== Render ==========================
diff --git a/tests/Select.loadData.spec.tsx b/tests/Select.loadData.spec.tsx
index e307fe62..c938d95c 100644
--- a/tests/Select.loadData.spec.tsx
+++ b/tests/Select.loadData.spec.tsx
@@ -1,16 +1,11 @@
 /* eslint-disable no-undef, react/no-multi-comp, no-console */
-import Tree, { TreeNode } from 'rc-tree';
 import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 
-import TreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode as SelectNode } from '../src';
-import { selectNode } from './util';
+import TreeSelect from '../src';
 
 describe('TreeSelect.loadData', () => {
   it('keep sync', async () => {
-    let renderTimes = 0;
-    let calledLastId: number | null = null;
-
     const Demo = () => {
       const [treeData, setTreeData] = React.useState([
         {
@@ -20,17 +15,15 @@ describe('TreeSelect.loadData', () => {
         },
       ]);
 
-      renderTimes += 1;
-      const renderId = renderTimes;
-
       const loadData = async () => {
-        calledLastId = renderId;
+        const nextId = treeData.length;
+
         setTreeData([
           ...treeData,
           {
-            title: `${renderId}`,
-            value: renderId,
-            isLeaf: true,
+            title: `${nextId}`,
+            value: nextId,
+            isLeaf: false,
           },
         ]);
       };
@@ -40,18 +33,14 @@ describe('TreeSelect.loadData', () => {
 
     render(<Demo />);
 
-    console.log(document.body.innerHTML);
-
-    fireEvent.click(document.querySelector('.rc-tree-select-tree-switcher_close'));
-    await act(async () => {
-      await Promise.resolve();
-    });
-    expect(calledLastId).toBe(renderTimes);
-
-    fireEvent.click(document.querySelector('.rc-tree-select-tree-switcher_close'));
-    await act(async () => {
-      await Promise.resolve();
-    });
-    expect(calledLastId).toBe(renderTimes);
+    for (let i = 0; i < 5; i += 1) {
+      fireEvent.click(document.querySelector('.rc-tree-select-tree-switcher_close'));
+      await act(async () => {
+        await Promise.resolve();
+      });
+      expect(
+        document.querySelectorAll('.rc-tree-select-tree-list .rc-tree-select-tree-treenode'),
+      ).toHaveLength(2 + i);
+    }
   });
 });