From 0c34fe0f554a6a9245e71f4c79870c7502e33668 Mon Sep 17 00:00:00 2001
From: edc-hui <edc-hui@outlook.com>
Date: Thu, 17 Nov 2022 18:15:40 +0800
Subject: [PATCH] fix: TreeSlect will trigger loadData when clearing the search
 (#424)

---
 src/utils/valueUtil.ts                  |  3 +-
 tests/Select.SearchInput.spec.js        | 96 ++++++++++++++++++++++++-
 tests/__snapshots__/Select.spec.js.snap |  4 +-
 3 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
index b414b409..0063ce82 100644
--- a/src/utils/valueUtil.ts
+++ b/src/utils/valueUtil.ts
@@ -32,10 +32,9 @@ export function getAllKeys(treeData: DefaultOptionType[], fieldNames: InternalFi
 
   function dig(list: DefaultOptionType[]) {
     list.forEach(item => {
-      keys.push(item[fieldNames.value]);
-
       const children = item[fieldNames.children];
       if (children) {
+        keys.push(item[fieldNames.value]);
         dig(children);
       }
     });
diff --git a/tests/Select.SearchInput.spec.js b/tests/Select.SearchInput.spec.js
index 3b6861c3..2cb3e061 100644
--- a/tests/Select.SearchInput.spec.js
+++ b/tests/Select.SearchInput.spec.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { mount } from 'enzyme';
 import TreeSelect, { TreeNode } from '../src';
 
@@ -72,4 +72,98 @@ describe('TreeSelect.SearchInput', () => {
     search('');
     expect(listProps().expandedKeys).toEqual(['bamboo', 'light']);
   });
+
+  it('not trigger loadData when clearing the search', () => {
+    let called = 0;
+    const handleLoadData = jest.fn();
+    const Demo = () => {
+      const [value, setValue] = useState();
+      const [treeData, setTreeData] = useState([]);
+
+      const addDefaultTreeData = () => {
+        setTreeData([
+          { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+          { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+          { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+        ])
+      }
+
+      const genTreeNode = (parentId, isLeaf = false) => {
+        const random = Math.random().toString(36).substring(2, 6);
+        return {
+          id: random,
+          pId: parentId,
+          value: random,
+          title: isLeaf ? 'Tree Node' : 'Expand to load',
+          isLeaf,
+        };
+      };
+
+      const onLoadData = ({ id, ...rest }) =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            called += 1;
+            handleLoadData({ id, ...rest });
+            setTreeData(
+              treeData.concat([
+                genTreeNode(id, false),
+                genTreeNode(id, true),
+                genTreeNode(id, true),
+              ])
+            );
+            resolve(undefined);
+          }, 300);
+        });
+
+      const onChange = (newValue) => {
+        setValue(newValue);
+      };
+
+      return (
+        <>
+          <TreeSelect
+            treeDataSimpleMode
+            value={value}
+            placeholder="Please select"
+            onChange={onChange}
+            loadData={onLoadData}
+            treeData={treeData}
+            treeNodeFilterProp="title"
+            showSearch
+            filterTreeNode={false}
+          />
+          <button onClick={addDefaultTreeData}>设置数据</button>
+        </>
+      );
+    };
+    const wrapper = mount(<Demo />);
+    expect(wrapper.find('button').length).toBe(1);
+    expect(handleLoadData).not.toHaveBeenCalled();
+
+    function search(value) {
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value } });
+      wrapper.update();
+    }
+    search('Tree Node');
+    expect(handleLoadData).not.toHaveBeenCalled();
+
+    search('');
+    expect(handleLoadData).not.toHaveBeenCalled();
+
+    expect(wrapper.find('.rc-tree-select-empty').length).toBe(1);
+
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('.rc-tree-select-empty').length).toBe(0);
+    expect(wrapper.find('.rc-tree-select-tree').length).toBe(1);
+
+    search('Tree Node');
+    expect(handleLoadData).not.toHaveBeenCalled();
+
+    search('');
+    expect(handleLoadData).not.toHaveBeenCalled();
+    expect(called).toBe(0);
+  });
 });
diff --git a/tests/__snapshots__/Select.spec.js.snap b/tests/__snapshots__/Select.spec.js.snap
index 4f92ec17..4e156f4d 100644
--- a/tests/__snapshots__/Select.spec.js.snap
+++ b/tests/__snapshots__/Select.spec.js.snap
@@ -1042,7 +1042,7 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
                   >
                     <div
                       aria-grabbed="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close filter-node"
                       draggable="false"
                     >
                       <span
@@ -1068,7 +1068,7 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
                     </div>
                     <div
                       aria-grabbed="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
                       draggable="false"
                     >
                       <span