pingdotgg / pingdotgg/t3code

[Bug]: PageUp and PageDown do nothing in command palette lists

Open
#6,159 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
23k
Forks
5.9k
Avg merge
11h 14m
Merged PRs (30d)
357

Description

Before submitting
  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Start the app and click the "New project" button in the sidebar (the folder-plus icon), or use the Add project action in the command palette.
  2. Choose "Local folder". The palette now lists the directories under the current path.
  3. Pick a path with more directories than fit in the popup. ~/ is usually enough; the popup shows about ten rows.
  4. Press ArrowDown once to highlight a row.
  5. Press PageDown.
Expected behavior

The highlight moves down by one screenful of rows, the way a list moves in a file manager or any native list control, and stops on the last row.

Actual behavior

Nothing happens. The highlight stays where it is and the list does not scroll. PageUp behaves the same. The only way through a long folder list is one ArrowDown press per row, or typing the path by hand.

Home and End do move the highlight to the first and last row, so the page keys are the only missing step size.

Impact

Minor bug or occasional failure

Version or commit

main @ f5fce7416

Environment

Windows 11, dev build started with pnpm dev, checked in a Chromium-based browser. Not checked on macOS or Linux.

Workaround

Hold ArrowDown, or type the directory path into the palette input instead of browsing to it.

Notes

The list navigation is Base UI's, and its useListNavigation has cases for the arrow keys and for Home/End but none for PageUp/PageDown, so the keys reach the input and do nothing there. The highlighted index lives in Base UI's internal store and the public Autocomplete/Combobox API has no way to set it: onItemHighlighted only reports changes and actionsRef carries just unmount. That is why a fix has to sit in the dependency rather than in the palette code.

The same palette component backs the file picker, project content search and favicon picker, so those lists should be affected too. I only measured the "New project" folder list.

A fix is proposed in #6155, which patches @base-ui/react to handle the page keys for vertical single-column lists.

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 in the apps/web command palette and review the Base UI useListNavigation behavior described in the issue. Compare the affected folder, file-search, project-search, and favicon-picker lists, then inspect the proposed fix in #6155. Done means PageUp and PageDown move the highlight by one visible screenful and stop at the list boundaries.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.