Megamenu: popup disappears when component undergoes a re-render while expanded

[peconomou929]

Describe the bug

If one of the menus in a megamenu is expanded while the megamenu undergoes a re-render, then

1. internally, the state is still expanded, but
2. visually, the menu popup disappears

This leads to some unexpected behavior.

Reproducer

No response

PrimeReact version

10.6.3

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

import "primereact/resources/themes/lara-light-cyan/theme.css";
import { MegaMenu } from 'primereact/megamenu';
import { useEffect, useState } from "react";

export default function App() {
  const [currentTime, setCurrentTime] = useState(0)

  const items = [
    {
      label: 'Furniture',
      items: [
        [
          {
            label: 'Living Room',
            items: [
              { label: 'Accessories' },
              { label: 'Armchair' },
              { label: 'Coffee Table' },
              { label: 'Couch' },
              { label: 'TV Stand' }]
          }
        ],
      ]
    },
    {
      label: 'Furniture',
      items: [
        [
          {
            label: 'Living Room',
            items: [
              { label: 'Accessories' },
              { label: 'Armchair' },
              { label: 'Coffee Table' },
              { label: 'Couch' },
              { label: 'TV Stand' }]
          }
        ],
      ]
    },
  ];

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentTime(Date.now())
    }, 3000)
    return () => {
      clearInterval(intervalId);
    }
  }, [])

  return (
    <div className="card">
      <MegaMenu model={items} />
    </div>
  )
}

Expected behavior

Menu popup should not disappear when megamenu undergoes a re-render.

[Rekl0w]

Interval makes the bug, try remove it. It works.

[peconomou929]

Interval makes the bug, try remove it. It works.

The interval was intentional. I'm trying to show that there is a problem when the megamenu re-renders. Therefore, I set up my component to re-render every 3 seconds.

This may seem like an artificial scenario, but it still represents a more general issue. In my application, the rendering of my megamenu depends on data which is fetched asynchronously, and which can be fetched at different points in time while the app is running. This results in a re-render, and it is weird behavior that the megamenu simply disappears when this data is fetched.

[melloware]

We should add a real StackBlitz reproducer to this ticket.

[Rekl0w]

You can fetch demo data's from primeReact's. This may represent the situation.