primefaces / primefaces/primereact

ListBox: not focusable by keyboard

Open
#8,200 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Accessibility Resolution: Stale
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

This is a copy of closed issue #6743 and affects accessibility.
Entry of ListBox is focusable using the Tab key only once (after the page is loaded). It is impossible to access the same ListBox a second time using the Tab or Shift+Tab.
This happens because TabIndex is set to -1 after first focus.

Reproducer

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

System Information
System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 69.67 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  Browsers:
    Chrome: 138.0.7204.184
    Safari: 18.5
  npmPackages:
    primereact: ^10.9.6 => 10.9.6 
    react: ^18.3.1 => 18.3.1
Steps to reproduce the behavior
  1. Click/Focus on element before ListBox.
  2. Press Tab on keyboard (OK - focus is on ListBox)
  3. Press Tab on keyboard (focus is on next element)
  4. Press Shift+Tab on keyboard (NOT OK - ListBox is omitted)
  5. Press Tab on keyboard (NOT OK - ListBox is omitted)
Expected behavior

You can focus the ListBox multiple times using Tab or Shift + Tab.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproducer and inspect the ListBox component's keyboard-focus handling, especially where TabIndex changes after the first focus. Reproduce the Tab and Shift+Tab sequence, then verify that the ListBox remains reachable repeatedly in both directions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.