p-menu: command function losing context

[PaulSchult]

Describe the bug

When using a p-menu that uses a command function, as seen in the stackblitz, the value that was once assigned doesn't get updated after the first click. This worked with Angular 14.

Working example with Angular 14. see here

Environment

See Stackblitz link.

Reproducer

https://stackblitz.com/edit/cp3ztu?file=src%2Fapp%2Fdemo%2Fmenu-basic-demo.html,src%2Fapp%2Fdemo%2Fmenu-basic-demo.ts

Angular version

16.2.0

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

Browser(s)

No response

Steps to reproduce the behavior

1. Open Stackblitz link
2. Click "Deutsch" and see value "de" on the right
3. Click "English" and see that the value hasn't changed
4. Refresh the page and this time select "English" first
5. Notifce that "en" is displayed on the right
6. Click "Deutscht" and see that the value hasn't changed

Expected behavior

The value should change depending on which item I'm selecting.

[ashikjs]

 for (const language of languages) {
      this.items.push({
        label: language.translations.de,
        command: () => {
          console.log(language.value);
          this.currentLanguage = language.value;
        },
      });
    }

this is workable version of your code.

you can check it here: https://stackblitz.com/edit/cp3ztu-tykkvq?file=src%2Fapp%2Fdemo%2Fmenu-basic-demo.html,src%2Fapp%2Fdemo%2Fmenu-basic-demo.ts

[PaulSchult]

 for (const language of languages) {
      this.items.push({
        label: language.translations.de,
        command: () => {
          console.log(language.value);
          this.currentLanguage = language.value;
        },
      });
    }

this is workable version of your code.

you can check it here: https://stackblitz.com/edit/cp3ztu-tykkvq?file=src%2Fapp%2Fdemo%2Fmenu-basic-demo.html,src%2Fapp%2Fdemo%2Fmenu-basic-demo.ts

sorry, I should have clarified that the async is important. I am doing some async calculations inside the command function

[ashikjs]

sorry, I should have clarified that the async is important. I am doing some async calculations inside the command function

Can you add some real life sync example here so we can understand.

[PaulSchult]

Can you add some real life sync example here so we can understand.

Do you mean async? E.g we have a dropdown where you can select a template and on the right is the menu button where the user can select the language of the template. Inside of the command function we take the selected template and load it from the db with the given language and apply it to some editor. The fetching is async, thats why we need the function to be async.

[cetincakiroglu]

Hi,

The issue doesn't exist in the latest PrimeNG, it might fixed in the versions between 16.2.x-16.4.x

See the working example here: https://stackblitz.com/edit/zrdb2w?file=src%2Fapp%2Fdemo%2Fmenu-command-demo.ts,src%2Fapp%2Fdemo%2Fmenu-command-demo.html

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!