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
primefaces · Jan 3, 2025 · e921655 · e921655
1 parent 7e663aa
commit e921655
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git 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
@@ -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) => {