Duplicate menu items when menu is opened more than once

[Anthony]

I have a menu that displays correctly the first time it is opened but displays duplicate menu items when it is opened after the first time (screenshot below). I have created a Stackblitz that recreates my use case and shows the bug. In the Stackblitz you will notice that the first time the menu opens, everything displays correctly. Howver, if you open the menu again, you'll see two of the menu items are duplicated. The Stackblitz can be found here: https://stackblitz.com/edit/angular-kd2jhcxz-yfemdvcn?file=src%2Fapp.component.ts

This looks like a bug to me.

[Prasanth Madhaiyan]

Hi Anthony,

Greetings from Syncfusion support.

Based on the shared sample, we were able to replicate the reported 'Duplicate menu items when the menu is opened more than once' issue while running the sample on our end.

However, to resolve this issue, you can call the removeItems method inside the beforeClose event instead of calling it in the beforeOpen event.

Refer to the below code snippets. 

[app.component.ts]

...

@Component({

  imports: [MenuModule, ButtonModule],

  standalone: true,

  selector: 'app-root',

  template: `<div class="e-section-control">

        <div class="control-section">

            <div class="menu-section">

                <ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()' (beforeClose)="beforeClose($event)"></ejs-menu>

            </div>

        </div>

        </div>`,

})

export class AppComponent {

  @ViewChild('menu')

  public menuObj?: MenuComponent;

  ...

  public beforeClose(args: any) {

    this.menuObj?.removeItems(['dynamic-1', 'dynamic-2'], true);

  }

}

...

For your reference, we have attached the sample. 

Sample: https://stackblitz.com/edit/angular-kd2jhcxz-1qgdcy2h?file=src%2Fapp.component.ts

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Anthony]

Hello Prasanth,

I have confirmed that removing the dynamic menu items in the beforeClose event handler resolves the issue. Thank you for the solution.

Anthony.