primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Calendar: Popup not focusable by keyboard in specific setup (react-hook-form + Froala)

Open idzmag opened this issue 3 months ago • 0 comments

Describe the bug

When Calendar is inside react-hook-form, keyboard navigation with TAB key to calendar popup is not possible when Froala editor exists on page.

Reproducer

https://stackblitz.com/edit/vitejs-vite-zffnmcuz

System Information

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 138.02 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.3 
    Yarn: 1.22.22 
    npm: 10.8.2
  Browsers:
    Chrome: 140.0.7339.214
    Firefox: 140.3.1
    Safari: 18.5
  npmPackages:
    primereact: latest => 10.9.5 
    react: ^19.1.0 => 19.1.0

Steps to reproduce the behavior

In stackblitz it works fine. Download the project and run it directly to reproduce.

  1. Use TAB key to focus calendar component, calendar popup is opened.
  2. Press TAB key again - nothing happens and focus is still in the input.

If Froala editor is not present in the form, it works fine. Remove it to see expected behavior.

Expected behavior

When calendar input is focused and you press TAB key, focus jumps to popup.

I'm aware that there's a possibility that Froala editor code hijacks the global keydown events, but I wasn't able to trace the exact reason. I'm hoping you could confirm if there's no option to mitigate it on primereact's side. appendTo: "self" helps with the issue but I cannot use that as my Calendar is displayed in the table and it's cut with this setting.

idzmag avatar Oct 07 '25 09:10 idzmag