Fixed #1011 - PanelMenu collapses on clicking the menu link instead o…

…f being in expanded state
primefaces · Mar 5, 2021 · 48f224e · 48f224e
1 parent 3db2101
commit 48f224e
Showing 1 changed file with 94 additions and 0 deletions.
diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js
@@ -40,17 +40,64 @@ class PanelMenuSub extends Component {
         }
 
         if (this.state.activeItem && this.state.activeItem === item) {
+            item.expanded = false;
             this.setState({
                 activeItem: null
             });
         }
         else {
+            let activeItem = this.state.activeItem;
+            if (activeItem) {
+                activeItem.expanded = false;
+            }
+
+            item.expanded = true;
             this.setState({
                 activeItem: item
             });
         }
     }
 
+    updateActiveItemState(item, isActive) {
+        let activeItem = this.state.activeItem;
+        if (activeItem) {
+            activeItem.expanded = isActive;
+        }
+
+        item.expanded = !isActive;
+        this.setState({
+            activeItem: !isActive ? item : null
+        });
+    }
+
+    findActiveItem() {
+        let activeItem = null;
+
+        if (this.props.model) {
+            this.props.model.forEach(item => {
+                if (item.expanded) {
+                    if (!activeItem) {
+                        activeItem = item;
+                    }
+                    else {
+                        item.expanded = false;
+                    }
+                }
+            });
+        }
+
+        return activeItem;
+    }
+
+    componentDidMount() {
+        const activeItem = this.findActiveItem();
+        if (activeItem) {
+            this.setState({
+                activeItem
+            });
+        }
+    }
+
     renderSeparator(index) {
         return (
             <li key={'separator_' + index} className="p-menu-separator"></li>
@@ -189,17 +236,64 @@ export class PanelMenu extends Component {
         }
 
         if (this.state.activeItem && this.state.activeItem === item) {
+            item.expanded = false;
             this.setState({
                 activeItem: null
             });
         }
         else {
+            let activeItem = this.state.activeItem;
+            if (activeItem) {
+                activeItem.expanded = false;
+            }
+
+            item.expanded = true;
             this.setState({
                 activeItem: item
             });
         }
     }
 
+    updateActiveItemState(item, isActive) {
+        let activeItem = this.state.activeItem;
+        if (activeItem) {
+            activeItem.expanded = isActive;
+        }
+
+        item.expanded = !isActive;
+        this.setState({
+            activeItem: !isActive ? item : null
+        });
+    }
+
+    findActiveItem() {
+        let activeItem = null;
+
+        if (this.props.model) {
+            this.props.model.forEach(item => {
+                if (item.expanded) {
+                    if (!activeItem) {
+                        activeItem = item;
+                    }
+                    else {
+                        item.expanded = false;
+                    }
+                }
+            });
+        }
+
+        return activeItem;
+    }
+
+    componentDidMount() {
+        const activeItem = this.findActiveItem();
+        if (activeItem) {
+            this.setState({
+                activeItem
+            });
+        }
+    }
+
     renderPanelIcon(item) {
         const className = classNames('p-menuitem-icon', item.icon);