fix: always change treeProps.expandedKeys to avoid wrong loadling data (#576)

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: jingzouzou <jingzouzou@didiglobal.com>

Author: 3 people

src/OptionList.tsx

@@ -196,6 +196,13 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     onKeyUp: () => {},
   }));
 
+  const loadDataFun = useMemo(
+    () => searchValue ? null : (loadData as any),
+    [searchValue, treeExpandedKeys || expandedKeys],
+    ([preSearchValue], [nextSearchValue, nextExcludeSearchExpandedKeys]) =>
+      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys)
+  );
+
   // ========================== Render ==========================
   if (memoTreeData.length === 0) {
     return (
@@ -237,7 +244,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         showIcon={showTreeIcon}
         switcherIcon={switcherIcon}
         showLine={treeLine}
-        loadData={searchValue ? null : (loadData as any)}
+        loadData={loadDataFun}
         motion={treeMotion}
         activeKey={activeKey}
         // We handle keys by out instead tree self

tests/Select.SearchInput.spec.js

@@ -19,12 +19,7 @@ describe('TreeSelect.SearchInput', () => {
 
     wrapper.selectNode();
     expect(onSearch).not.toHaveBeenCalled();
-    expect(
-      wrapper
-        .find('input')
-        .first()
-        .props().value,
-    ).toBeFalsy();
+    expect(wrapper.find('input').first().props().value).toBeFalsy();
   });
 
   it('expandedKeys', () => {
@@ -51,10 +46,7 @@ describe('TreeSelect.SearchInput', () => {
     expect(wrapper.find('NodeList').prop('expandedKeys')).toEqual(['bamboo', 'light']);
 
     function search(value) {
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value } });
+      wrapper.find('input').first().simulate('change', { target: { value } });
       wrapper.update();
     }
 
@@ -85,8 +77,8 @@ describe('TreeSelect.SearchInput', () => {
           { 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);
@@ -100,22 +92,16 @@ describe('TreeSelect.SearchInput', () => {
       };
 
       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);
+        new Promise(resolve => {
+          called += 1;
+          handleLoadData({ id, ...rest });
+          setTreeData(
+            treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
+          );
+          resolve(undefined);
         });
 
-      const onChange = (newValue) => {
+      const onChange = newValue => {
         setValue(newValue);
       };
 
@@ -130,7 +116,6 @@ describe('TreeSelect.SearchInput', () => {
             treeData={treeData}
             treeNodeFilterProp="title"
             showSearch
-            filterTreeNode={false}
           />
           <button onClick={addDefaultTreeData}>设置数据</button>
         </>
@@ -141,10 +126,7 @@ describe('TreeSelect.SearchInput', () => {
     expect(handleLoadData).not.toHaveBeenCalled();
 
     function search(value) {
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value } });
+      wrapper.find('input').first().simulate('change', { target: { value } });
       wrapper.update();
     }
     search('Tree Node');
@@ -165,5 +147,55 @@ describe('TreeSelect.SearchInput', () => {
     search('');
     expect(handleLoadData).not.toHaveBeenCalled();
     expect(called).toBe(0);
+
+    search('ex');
+    const nodes = wrapper.find(`[title="${'Expand to load'}"]`).hostNodes();
+    nodes.first().simulate('click');
+    expect(called).toBe(0); // should not trrigger all nodes to load data
+  });
+
+  it('should trrigger `loadData` when click node', () => {
+    let called = 0;
+    const Demo = () => {
+      const [value, setValue] = useState();
+      const onLoadData = ({ id, ...rest }) =>
+        new Promise(resolve => {
+          called += 1;
+          resolve(undefined);
+        });
+
+      const onChange = newValue => {
+        setValue(newValue);
+      };
+
+      return (
+        <TreeSelect
+          treeDataSimpleMode
+          value={value}
+          placeholder="Please select"
+          onChange={onChange}
+          loadData={onLoadData}
+          treeData={[
+            { 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 },
+          ]}
+          treeNodeFilterProp="title"
+          treeExpandAction="click"
+          showSearch
+        />
+      );
+    };
+    const wrapper = mount(<Demo />);
+
+    function search(value) {
+      wrapper.find('input').first().simulate('change', { target: { value } });
+      wrapper.update();
+    }
+
+    search('ex');
+    const nodes = wrapper.find(`[title="${'Expand to load'}"]`).hostNodes();
+    nodes.first().simulate('click');
+    expect(called).toBe(1);
   });
 });