PanelMenu: InputText not working correctly

[Usamacs66]

Describe the bug

import React from 'react';
import { PanelMenu } from 'primereact/panelmenu';
import { MenuItem } from 'primereact/menuitem';
import { Badge } from 'primereact/badge';

export default function TemplateDemo() {
  const itemRenderer = (item, options) => (
    <>
      <a
        className="flex align-items-center px-3 py-2 cursor-pointer"
        onClick={options.onClick}
      >
        <span className={`${item.icon} text-primary`} />
        <span className={`mx-2 ${item.items && 'font-semibold'}`}>
          {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>
      <input type="text" />
    </>
  );

  const items: MenuItem[] = [
    {
      label: 'Mail',
      icon: 'pi pi-envelope',
      badge: 5,
      items: [
        {
          label: 'Compose',
          icon: 'pi pi-file-edit',
          shortcut: '⌘+N',
          template: itemRenderer,
        },
        {
          label: 'Inbox',
          icon: 'pi pi-inbox',
          badge: 5,
          template: itemRenderer,
        },
        {
          label: 'Sent',
          icon: 'pi pi-send',
          shortcut: '⌘+S',
          template: itemRenderer,
        },
        {
          label: 'Trash',
          icon: 'pi pi-trash',
          shortcut: '⌘+T',
          template: itemRenderer,
        },
      ],
    },
    {
      label: 'Reports',
      icon: 'pi pi-chart-bar',
      shortcut: '⌘+R',
      items: [
        {
          label: 'Sales',
          icon: 'pi pi-chart-line',
          badge: 3,
          template: itemRenderer,
        },
        {
          label: 'Products',
          icon: 'pi pi-list',
          badge: 6,
          template: itemRenderer,
        },
      ],
    },
    {
      label: 'Profile',
      icon: 'pi pi-user',
      shortcut: '⌘+W',
      items: [
        {
          label: 'Settings',
          icon: 'pi pi-cog',
          shortcut: '⌘+O',
          template: itemRenderer,
        },
        {
          label: 'Privacy',
          icon: 'pi pi-shield',
          shortcut: '⌘+P',
          template: itemRenderer,
        },
      ],
    },
  ];
  return (
    <div className="card flex justify-content-center">
      <PanelMenu model={items} className="w-full md:w-20rem" />
    </div>
  );
}

you can't write anything in inputText it will give error

Reproducer

No response

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. use PanelMenu and in it's item use template
2. in this template use InputText
3. this inputText will not allow you to write anything and will give you console error

Expected behavior

inputText field should work

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[Usamacs66]

Click on this link to reproduce it https://stackblitz.com/edit/nuru9h-g8nwgy?file=src%2FApp.tsx try to write something in Input Text field

[melloware]

So PanelMenu is NOT an input component...its a menu. So its ARIA accessibility keyboard handling is stealing the focus from your Input. This is not a correct UI paradigm you want to use Accordion: https://primereact.org/accordion/