PrimeReact 'PanelMenu' collapses on clicking the menu link. How to keep it expanded?

[jjayaraman]

PrimeReact 'PanelMenu' collapse on clicking the menu link.
How to keep the selected menu expanded?



Here is my code.

Code: Select all

import React, { Component } from 'react'

import { PanelMenu } from 'primereact/panelmenu';


export default class Menu extends Component {

   constructor() {
      super();
      this.state = {
         items: [
            {
               label: 'Create Custom Quote',
               icon: 'pi pi-fw pl-plus'
            },
            {
               label: 'Search Custom Quote',
               icon: 'pi pi-fw pi-search'
            },
            {
               label: 'Admin',
               icon: 'pi pi-fw pi-cog',
               items: [
                  {
                     label: 'Components',
                     icon: 'pi pi-fw pi-th-large',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-plus'
                        },
                        {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search'
                        }
                     ]
                  },
                  {
                     label: 'Rules',
                     icon: 'pi pi-fw pi-list',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-plus'
                        },
                        {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search'
                        }
                     ]
                  },
                  {
                     label: 'Price',
                     icon: 'pi pi-fw pi-dollar',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-plus'
                        },
                        {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search'
                        }
                     ]
                  },
                  {
                     label: 'Price Parameters',
                     icon: 'pi pi-fw pi-dollar',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-plus',
                           url: '/admin/price-parameter/create'
                        },
                        {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search',
                           url: '/admin/price-parameter/search'
                        }
                     ]
                  },
                  {
                     label: 'Users',
                     icon: 'pi pi-fw pi-user',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-user-plus'
                        },
                        {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search'
                        }
                     ]
                  }
               ]
            }
         ]
      }
   }

   render() {



      return (
         <div id="leftMenu">
            <PanelMenu model={this.state.items} style={{ fontSize: '12px' }} />
         </div>
      )
   }
}

[mert.sincan]

For now, you can use command property of Menu model; https://www.primefaces.org/primereact/#/menumodel

Code: Select all

...
               command: (event) => {
                      this.selectedItemEl = event.originalEvent.currentTarget;
                     // event.originalEvent: Browser event
                     // event.item: MenuItem instance
                 },
...

// you can call this.selectedItemEl.click() anywhere.

Maybe, we can add 'expand' property to MenuModel. Could you please create a github ticket for it?

Best Regards,

[jjayaraman]

For now, you can use command property of Menu model; https://www.primefaces.org/primereact/#/menumodel

Code: Select all

...
               command: (event) => {
                      this.selectedItemEl = event.originalEvent.currentTarget;
                     // event.originalEvent: Browser event
                     // event.item: MenuItem instance
                 },
...

// you can call this.selectedItemEl.click() anywhere.

Maybe, we can add 'expand' property to MenuModel. Could you please create a github ticket for it?

Best Regards,

Thanks created a ticket -- https://github.com/primefaces/primereact/issues/1011

[jjayaraman]

For now, you can use command property of Menu model; https://www.primefaces.org/primereact/#/menumodel

Code: Select all

...
               command: (event) => {
                      this.selectedItemEl = event.originalEvent.currentTarget;
                     // event.originalEvent: Browser event
                     // event.item: MenuItem instance
                 },
...

// you can call this.selectedItemEl.click() anywhere.

Maybe, we can add 'expand' property to MenuModel. Could you please create a github ticket for it?

Best Regards,

Actually, on click I want to call a route "/admin/price-parameter/search"
I tried the below, but it did n't work.

Code: Select all

   {
                           label: 'Search',
                           icon: 'pi pi-fw pi-search',
                           // url: '/admin/price-parameter/search',
                           command: (event) => {
                              this.selectedItemEl = event.originalEvent.currentTarget;
                              this.selectedItemEl.click("/admin/price-parameter/search");
                           }
                        }

[mert.sincan]

Hi,

this.selectedItemEl.click("/admin/price-parameter/search");

- This use is wrong. The .click is JS click method. Unfortunately, I didn't understand exactly what you wanted. You want to expand a header item anywhere but, you are redirecting to another page on the above comment.
Could you please give more details?

Best Regards,

[jjayaraman]

Hi,

this.selectedItemEl.click("/admin/price-parameter/search");

- This use is wrong. The .click is JS click method. Unfortunately, I didn't understand exactly what you wanted. You want to expand a header item anywhere but, you are redirecting to another page on the above comment.
Could you please give more details?

Best Regards,

Actually I want to call a route /admin/price-parameter/search from the left menu,
It works with the below code, but after clicking the menu collapse instead of retaining the currently clicked menu link with expansion.

Code: Select all

         label: 'Price Parameters',
                     icon: 'pi pi-fw pi-dollar',
                     items: [
                        {
                           label: 'Create',
                           icon: 'pi pi-fw pi-plus',
                           url: '/admin/price-parameter/create'
                        }

[mert.sincan]

I couldn't replicate it. Could you please create a codesandbox link or video for us?

Best Regards,