MenuItem: Keyboard navigation breaks when using template

[JolianGof]

Describe the bug

I was facing a problem with MenuItem command not getting triggered by hitting the enter key when providing a template

But if I pass anything other than template it works

Reproducer

https://stackblitz.com/edit/xp3desv1-kjtkjrvh?file=src%2FApp.jsx

System Information

primereact 10.8.5

Steps to reproduce the behavior

1. open stack blitz
2. tab to the menuitem
3. click on new using the enter key it will work
4. click on the search using the enter key it won't work

Expected behavior

search menuitem should work when hitting the enter key

[tanerengiiin]

To make the command function work inside itemRenderer, you need to use the options prop. I've added the corrected version below. Let me know if this solves your issue.

import React, { useRef } from 'react';
import { Menu } from 'primereact/menu';
import { Toast } from 'primereact/toast';

export default function CommandDemo() {
  const itemRenderer = (item, options) => {
    return (
      <div
        className="p-menuitem-content"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            console.log('clicked with enter');
          }
        }}
+      onClick={(e) => {
+        options.onClick(e);
+      }}
      >
        <a className="flex align-items-center p-menuitem-link">
          <span className={item.icon} />
          <span className="mx-2">{item.label}</span>
          {item.badge && <Badge className="ml-auto" value={item.badge} />}
          {item.shortcut && (
            <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
              {item.shortcut}
            </span>
          )}
        </a>
      </div>
    );
  };
  const toast = useRef(null);
  let items = [
    {
      label: 'New',
      icon: 'pi pi-plus',
      command: () => {
        toast.current.show({
          severity: 'success',
          summary: 'Success',
          detail: 'File created',
          life: 3000,
        });
      },
      template: itemRenderer,
    },
    {
      label: 'Search',
      icon: 'pi pi-search',
      command: () => {
        toast.current.show({
          severity: 'warn',
          summary: 'Search Completed',
          detail: 'No results found',
          life: 3000,
        });
      },
      template: itemRenderer,
    },
  ];

  return (
    <>
      <Menu model={items} />
      <Toast ref={toast} />
    </>
  );
}