primefaces / primefaces/primereact
Calendar: Popup not focusable by keyboard in specific setup (react-hook-form + Froala)
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
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.
- Use TAB key to focus calendar component, calendar popup is opened.
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by downloading the linked StackBlitz project and reproducing the failure with react-hook-form and Froala present, then compare it with Froala removed and with appendTo set to "self". Trace Calendar's popup focus handling alongside the global keydown interaction; done means TAB moves focus from the Calendar input into the popup without requiring appendTo="self".
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100