From e921655f0302fc59726a9c09e9ddaf44d9312af4 Mon Sep 17 00:00:00 2001
From: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Date: Sat, 4 Jan 2025 00:42:17 +0900
Subject: [PATCH] fix(tree): toggle node when filtering mode (#7282)

* fix: toggle node when filtering mode

* remove: delete not working code

* refactor: change default value

* style: skip react-hooks/exhaustive-deps lint

* fix: prevent event bubbling when dropdown click

* chore: revert unrelated change
---
 components/lib/tree/Tree.js       | 33 ++++++++++++++++++++-----------
 components/lib/tree/UITreeNode.js |  2 +-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 6be2bacd48..2bc75e0faa 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -16,12 +16,18 @@ 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([]);
         const dragState = React.useRef(null);
         const filterChanged = React.useRef(false);
+
         const filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
-        const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+        const isFiltering = props.filter && filteredValue;
+        const expandedKeys = isFiltering ? filterExpandedKeys : props.onToggle ? props.expandedKeys : expandedKeysState;
+        const currentFilterExpandedKeys = {};
+
         const childFocusEvent = React.useRef(null);
         const { ptm, cx, isUnstyled } = TreeBase.setMetaData({
             props,
@@ -52,7 +58,11 @@ export const Tree = React.memo(
                     childFocusEvent.current = originalEvent;
                 }
 
-                setExpandedKeysState(value);
+                if (isFiltering) {
+                    setFilterExpandedKeys(value);
+                } else {
+                    setExpandedKeysState(value);
+                }
             }
         };
 
@@ -80,6 +90,11 @@ export const Tree = React.memo(
             }
         }, [expandedKeys]);
 
+        React.useEffect(() => {
+            if (props.filter) _filter();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [filteredValue, props.value, props.filter]);
+
         const onDragStart = (event) => {
             dragState.current = {
                 path: event.path,
@@ -299,20 +314,18 @@ export const Tree = React.memo(
 
         const filter = (value) => {
             setFilterValueState(ObjectUtils.isNotEmpty(value) ? value : '');
-            _filter();
         };
 
         const childNodeFocus = (node) => {};
 
         const _filter = () => {
-            if (!filterChanged.current) {
-                return;
-            }
+            if (!filterChanged.current) return;
 
             if (ObjectUtils.isEmpty(filteredValue)) {
                 filteredNodes.current = props.value;
             } else {
                 filteredNodes.current = [];
+
                 const searchFields = props.filterBy.split(',');
                 const filterText = filteredValue.toLocaleLowerCase(props.filterLocale);
                 const isStrictMode = props.filterMode === 'strict';
@@ -330,6 +343,7 @@ export const Tree = React.memo(
                 }
             }
 
+            setFilterExpandedKeys(currentFilterExpandedKeys);
             filterChanged.current = false;
         };
 
@@ -353,7 +367,7 @@ export const Tree = React.memo(
                 }
 
                 if (matched) {
-                    node.expanded = true;
+                    currentFilterExpandedKeys[node.key] = true;
 
                     return true;
                 }
@@ -475,10 +489,7 @@ export const Tree = React.memo(
 
         const createModel = () => {
             if (props.value) {
-                if (props.filter) {
-                    filterChanged.current = true;
-                    _filter();
-                }
+                if (props.filter) filterChanged.current = true;
 
                 const value = getRootNode();
 
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index a0b62908dd..14c3e50998 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -15,7 +15,7 @@ export const UITreeNode = React.memo((props) => {
     const mergeProps = useMergeProps();
     const isLeaf = props.isNodeLeaf(props.node);
     const label = props.node.label;
-    const expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded;
+    const expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
     const { ptm, cx } = props;
 
     const getPTOptions = (key) => {