Command palette: find why it loses focus when reopened just after a page change

Closed
  • Is something wrong?
#506 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
playwright, typescript
Domain
accessibility, frontend, testing

Research direction

Start in components/layout/command-palette.tsx, at onOpenAutoFocus and the effect that focuses the field, then check components/ui/command.tsx and components/ui/dialog.tsx for what moves focus. Reproduce by logging focus events in tests/e2e/command-palette.spec.ts while the palette is reopened right after a studio navigation. Done means the root cause is fixed, the refocus workaround is removed or justified, the test passes 20 runs at --workers=8 without fixed waits, and the axe scan still passes.

Written by the indexing model from the issue text.

Description

accessibility area: ui difficulty: medium enhancement help wanted v2.0.0

Summary

In a test, opening the palette again right after navigating to a studio left focus on the results list, so keys typed next went to the page. The palette now takes focus back on the frames after it opens, which hides the problem, but the cause is not known. Find it, and remove the workaround if the cause can be fixed.

Part of the 2.0.0 plan: fewer, better and fully tested studios, on a calmer and faster site.

Where to look

  • components/layout/command-palette.tsx: onOpenAutoFocus and the effect that focuses the field
  • components/ui/command.tsx and components/ui/dialog.tsx
  • tests/e2e/command-palette.spec.ts

Behaviour

  • Reproduce it with a trace of focus events (the first palette is closed by choosing a studio, the second opens while the page is still hydrating).
  • Say what moves focus, and fix that, not the symptom.
  • Keep the palette's focus behaviour tested with no fixed waits.

Acceptance criteria

  • The test passes 20 runs in a row at --workers=8 with the effect that refocuses removed, or the pull request explains why it must stay.
  • A person who presses Ctrl K twice quickly can type at once.
  • The axe scan still passes.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
6h 9m
Merged PRs (30d)
73

Getting set up

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.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.