fix control treeExpandedKeys (#227)

.prettierrc

@@ -3,5 +3,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "printWidth": 100
 }

package.json

@@ -44,6 +44,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
+    "@types/jest": "^25.1.4",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",

src/OptionList.tsx

@@ -4,13 +4,7 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import { RefOptionListProps } from 'rc-select/lib/OptionList';
 import Tree, { TreeProps } from 'rc-tree';
 import { EventDataNode } from 'rc-tree/lib/interface';
-import {
-  FlattenDataNode,
-  RawValueType,
-  DataNode,
-  TreeDataNode,
-  Key,
-} from './interface';
+import { FlattenDataNode, RawValueType, DataNode, TreeDataNode, Key } from './interface';
 import { SelectContext } from './Context';
 import useKeyValueMapping from './hooks/useKeyValueMapping';
 import useKeyValueMap from './hooks/useKeyValueMap';
@@ -56,10 +50,10 @@ export interface OptionListProps<OptionsType extends object[]> {
   onScroll: React.UIEventHandler<HTMLDivElement>;
 }
 
-const OptionList: React.RefForwardingComponent<
-  RefOptionListProps,
-  OptionListProps<DataNode[]>
-> = (props, ref) => {
+const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListProps<DataNode[]>> = (
+  props,
+  ref,
+) => {
   const {
     prefixCls,
     height,
@@ -102,10 +96,7 @@ const OptionList: React.RefForwardingComponent<
   );
 
   const [cacheKeyMap, cacheValueMap] = useKeyValueMap(flattenOptions);
-  const [getEntityByKey, getEntityByValue] = useKeyValueMapping(
-    cacheKeyMap,
-    cacheValueMap,
-  );
+  const [getEntityByKey, getEntityByValue] = useKeyValueMapping(cacheKeyMap, cacheValueMap);
 
   // ========================== Values ==========================
   const valueKeys = React.useMemo(
@@ -148,14 +139,15 @@ const OptionList: React.RefForwardingComponent<
   };
 
   // =========================== Keys ===========================
-  const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(
-    treeDefaultExpandedKeys,
-  );
-  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<Key[]>(
-    null,
-  );
-  const mergedExpandedKeys =
-    treeExpandedKeys || (searchValue ? searchExpandedKeys : expandedKeys);
+  const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(treeDefaultExpandedKeys);
+  const [searchExpandedKeys, setSearchExpandedKeys] = React.useState<Key[]>(null);
+
+  const mergedExpandedKeys = React.useMemo(() => {
+    if (treeExpandedKeys) {
+      return [...treeExpandedKeys];
+    }
+    return searchValue ? searchExpandedKeys : expandedKeys;
+  }, [expandedKeys, searchExpandedKeys, lowerSearchValue, treeExpandedKeys]);
 
   React.useEffect(() => {
     if (searchValue) {
@@ -203,9 +195,7 @@ const OptionList: React.RefForwardingComponent<
         case KeyCode.DOWN:
         case KeyCode.LEFT:
         case KeyCode.RIGHT:
-          treeRef.current?.onKeyDown(event as React.KeyboardEvent<
-            HTMLDivElement
-          >);
+          treeRef.current?.onKeyDown(event as React.KeyboardEvent<HTMLDivElement>);
           break;
 
         // >>> Select item
@@ -231,11 +221,7 @@ const OptionList: React.RefForwardingComponent<
   // ========================== Render ==========================
   if (memoOptions.length === 0) {
     return (
-      <div
-        role="listbox"
-        className={`${prefixCls}-empty`}
-        onMouseDown={onListMouseDown}
-      >
+      <div role="listbox" className={`${prefixCls}-empty`} onMouseDown={onListMouseDown}>
         {notFoundContent}
       </div>
     );
@@ -291,10 +277,7 @@ const OptionList: React.RefForwardingComponent<
   );
 };
 
-const RefOptionList = React.forwardRef<
-  RefOptionListProps,
-  OptionListProps<DataNode[]>
->(OptionList);
+const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps<DataNode[]>>(OptionList);
 RefOptionList.displayName = 'OptionList';
 
 export default RefOptionList;

tests/Select.SearchInput.spec.js

@@ -26,4 +26,50 @@ describe('TreeSelect.SearchInput', () => {
         .props().value,
     ).toBeFalsy();
   });
+
+  it('expandedKeys', () => {
+    const wrapper = mount(
+      <TreeSelect
+        open
+        showSearch
+        treeExpandedKeys={['bamboo', 'light']}
+        treeData={[
+          {
+            title: 'bamboo',
+            value: 'bamboo',
+            children: [{ title: '111', value: '111' }],
+          },
+          {
+            title: 'light',
+            value: 'light',
+            children: [{ title: '222', value: '222' }],
+          },
+        ]}
+      />,
+    );
+
+    expect(wrapper.find('NodeList').props().expandedKeys).toEqual(['bamboo', 'light']);
+
+    function search(value) {
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value } });
+      wrapper.update();
+    }
+
+    function listProps() {
+      return wrapper.find('NodeList').props();
+    }
+
+    // Clean up
+    search('bambooA');
+
+    // Return back
+    search('bamboo');
+
+    // Back to default
+    search('');
+    expect(listProps().expandedKeys).toEqual(['bamboo', 'light']);
+  });
 });