MenuItem template prop causes p-focus to be added to the first item in the list

[snake-py]

Describe the bug

I made a reproducible case in this stackblitz https://stackblitz.com/edit/xtgmp1-5a7hdw?file=src%2FApp.jsx

So basically I added a Link as template and added it to items.

const Link = (props) => {
  return (
    <a className="p-menuitem-link" {...props}>
      <span className="test p-menuitem-text w-full">
        {props.children ?? props.label}
      </span>
    </a>
  );
};

const items = [
  {
    label: 'Meine Verträge',
    href: '/vertraege',
    key: 'contracts',
    template: Link,
  },
]

Now if you have multiple items and click on the last item, the p-focus class will be applied to the first li of the MenuBar. I am unsure if I do something wrong, or if this is a bug. I used this code now for over two years with, prime 9 and i am just within the migration to prime10 when I noticed the issue.

Reproducer

https://stackblitz.com/edit/xtgmp1-5a7hdw?file=src%2FApp.jsx

System Information

    "primeflex": "^3.3.1",
    "primereact": "^10.8.2",

Happens in chrome, not tested in other browsers

Steps to reproduce the behavior

1. go to stackblitz
2. click on last item in list
3. observe the p-focus being applied on wrong li

Expected behavior

p-focus only being applied to correct li

[melloware]

Its because Accessibility was added in 10. Accessibility says the first menu item should get focus. because that is what you are interacting with for visually impaired users.

see: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

But this does look like a bug.

[snake-py]

@melloware do have an idea for a workaround? I notice if you remove the href key, it only flashes for the first time.

[melloware]

i haven't studied the code throughly doing the focusing but it feels like the bug is somewhere in that focus code of the menu.

[cyril-adjilani]

i have also encountered this, upon clicking the hamburger menu, first item is focused even though another item is the active.