fix: node toggling while filtering and wrong position of the dropdown panel (#8173)

Author: kaylaa0

components/lib/tree/Tree.js

@@ -16,7 +16,6 @@ export const Tree = React.memo(
 
         const [filterValue, filterValueState, setFilterValueState] = useDebounce('', props.filterDelay || 0);
         const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys);
-        const [filterExpandedKeys, setFilterExpandedKeys] = React.useState({});
 
         const elementRef = React.useRef(null);
         const filteredNodes = React.useRef([]);
@@ -25,8 +24,8 @@ export const Tree = React.memo(
 
         const filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
         const isFiltering = props.filter && filteredValue;
-        const expandedKeys = isFiltering ? filterExpandedKeys : props.onToggle ? props.expandedKeys : expandedKeysState;
-        const currentFilterExpandedKeys = {};
+        const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+        const currentFilterExpandedKeys = React.useRef({});
 
         const childFocusEvent = React.useRef(null);
         const { ptm, cx, isUnstyled } = TreeBase.setMetaData({
@@ -51,18 +50,20 @@ export const Tree = React.memo(
         const onToggle = (event) => {
             const { originalEvent, value, navigateFocusToChild } = event;
 
-            if (props.onToggle) {
+            if (originalEvent == null && isFiltering) {
+                if (props.onToggle) {
+                    props.onToggle({ originalEvent, value: { ...props.expandedKeys, ...value } });
+                } else {
+                    setExpandedKeysState({ ...expandedKeysState, ...value });
+                }
+            } else if (props.onToggle) {
                 props.onToggle({ originalEvent, value });
             } else {
                 if (navigateFocusToChild) {
                     childFocusEvent.current = originalEvent;
                 }
 
-                if (isFiltering) {
-                    setFilterExpandedKeys(value);
-                } else {
-                    setExpandedKeysState(value);
-                }
+                setExpandedKeysState(value);
             }
         };
 
@@ -343,7 +344,13 @@ export const Tree = React.memo(
                 }
             }
 
-            setFilterExpandedKeys(currentFilterExpandedKeys);
+            onToggle({
+                originalEvent: null,
+                value: currentFilterExpandedKeys.current,
+                navigateFocusToChild: false
+            });
+
+            currentFilterExpandedKeys.current = {};
             filterChanged.current = false;
         };
 
@@ -367,7 +374,7 @@ export const Tree = React.memo(
                 }
 
                 if (matched) {
-                    currentFilterExpandedKeys[node.key] = true;
+                    currentFilterExpandedKeys.current[node.key] = true;
 
                     return true;
                 }