Menu | itemClick requires double click in popup mode if items generated by function

[roman-bychkov]

Describe the bug

Component: Menu inside a table row.
User should click twice on menu action to reach an action.

Environment

1. Click on Menu in table row
2. Click on Menu action once (will nothing happen)
3. Click on Menu action again - Action will executed

Reproducer

https://stackblitz.com/edit/8numcb-pnb4qf?file=src%2Fapp%2Fdemo%2Ftable-basic-demo.html

Angular version

16.2.0

PrimeNG version

16.5.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.12.1

Browser(s)

No response

Steps to reproduce the behavior

1. Click on Menu in table row
2. Click on Menu action (nothing happens)
3. Click on Menu action again - Action will executed

Expected behavior

When user click first time on menu action. Action should be execute.

[roman-bychkov]

any suggestions?

[dnordahl1]

In fiddling with this trying to find a workaround, I noticed that the bug goes away if you set an invalid appendTo, but not if you leave off appendTo. In comparing the menu objects after toggling, I noticed the ones that don't work (those without invalid appendTo), have a documentClickListener defined that points to a function called removeEventListener. Whereas the menu with the invalid appendTo does not have this. Also after the MenuItem command is executed, I notice none of the menus have this documentClickListener set.

Stackblitz example: https://stackblitz.com/edit/8numcb-2leua7

I'm not sure how to formulate a workaround based on this, or if it has anything to do with the issue. I tried removing the documentClickListener in the toggle event to see if that works without luck, but I'm not sure I'm doing so correctly. Perhaps this documentClickListener needing to be consumed is what the first/ineffective click on a menu item is accomplishing. After which point the second click is then able to work?

[cetincakiroglu]

Hi,

Thanks a lot for reporting the issue, great catch!

[cetincakiroglu]

Hi,

After investigating the matter, I've discovered an interesting correlation with the tabindex attribute within the <ul></ul> element. As part of our accessibility enhancements, we've incorporated a tabindex value along with focus and blur events to facilitate menu accessibility. However, this implementation seems to trigger the issue specifically when options are provided by a function. I tested your code in versions v14, v15, and v16 (pre-accessibility) and observed that the issue did not occur previously because the menu lacked tabindex input and support for focus and blur. Introducing a tabindex to the top ul element caused the issue, necessitating a double click. At present, the most effective solution seems to be setting tabindex to undefined. I've added a method to set tabindex to 'undefined'.

[dnordahl1]

@cetincakiroglu Do you know if this fix will be added to a version 16 release after being verified in 17?

In the stackblitz example I tried setting tabindex to undefined, null, and a value in both the menuItem html attributes and the model attributes, and it didn't seem to provide a workaround.

[cetincakiroglu]

Try this

<p-menu [tabindex]="undefined"></p-menu>

[dnordahl1]

@cetincakiroglu That doesn't seem to work either:

https://stackblitz.com/edit/8numcb-56sipg

[cetincakiroglu]

Please see the example: https://stackblitz.com/edit/8numcb-fyvbtn?file=src%2Fapp%2Fdemo%2Ftable-basic-demo.html

[dnordahl1]

@cetincakiroglu I'm hoping for a work around for version 16 so that we're able to be on an LTS release.

[IvanNovikov-mobdev]

@dnordahl1 I have implemented this workaround:

https://stackblitz.com/edit/8numcb-tc1ytv?file=src%2Fapp%2Fdemo%2Ftable-basic-demo.html,src%2Fapp%2Fdemo%2Ftable-basic-demo.ts

Hope this helps someone :)

[dnordahl1]

@IvanNovikov-mobdev Excellent.. I'm very grateful for you sharing this!

[dorthrithil]

@cetincakiroglu This is still an issue in 17.9.0
[tabindex]="undefined" didn't help.

[cetincakiroglu]

@cetincakiroglu This is still an issue in 17.9.0 [tabindex]="undefined" didn't help.

Hi,

Thanks for letting us know, we'll check before 17.13.0 release.

[clairebones]

Is it known if this is fixed in 17.18.4 before we upgrade to it? We're been stuck on 15 because we can't afford to introduce this issue.

[liefra]

The workaround [tabindex]="undefined" works for me using version 17.18.9

[Spiff77]

Hello,

For some reason i am still facing the problem with 17.18.9 and 17.18.10

<div class="card flex justify-content-center">
  <p-menu #menu
          [tabindex]="undefined" styleClass="z-2" [model]="getMenuItemsForItem(item)" [popup]="true" appendTo="body">
    <ng-template pTemplate="item" let-mitem>
      @if (mitem.route) {
        <a [routerLink]="mitem.route" class="p-menuitem-link">
          <span [class]="mitem.icon"></span>{{mitem.route+''+item.id}}
          <span class="ml-2">{{ mitem.label }}</span>
        </a>
      } @else {
        <a class="p-menuitem-link">
          <span [class]="mitem.icon"></span>
          <span class="ml-2">{{ mitem.label }}</span>
        </a>
      }
    </ng-template>
  </p-menu>
  <p-button [rounded]="true" [outlined]="true" (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>
</div>

with this in ts

getMenuItemsForItem(item: Survey): MenuItem[] {
    return [
      {
        label: 'Options',
        items: [
          {
            label: 'Edit',
            icon: 'pi pi-file-edit',
            route: '/survey/add/'+item.id,
          },
          {
            label: 'Manage answers',
            icon: 'pi pi-chart-bar',
            route: '/participation/survey/'+item.id,
          },
          {separator: true},
          {
            label: 'Delete',
            icon: 'pi pi-trash',
            style: {'color': 'red'},
            command: () => {
              this.deleteCl(item.id)
            }
          }
        ]
      }
    ]

[AlbaSS18]

The issue is present in v.17.18. I have set [tabindex]="undefined" and have worked for me. In my case, i have to override p-button for button.

[devmuzaky]

The issue is present in v.17.18. I have set [tabindex]="undefined" and have worked for me. In my case, i have to override p-button for button.

thank you so much, works with me