DEV Community

Cover image for 🚀 New React Challenge: Command Palette
ReactChallenges
ReactChallenges

Posted on

🚀 New React Challenge: Command Palette

#react #javascript #frontend #frontendchallenge

Search bars are fine until someone hits Cmd/Ctrl+K. A command palette replaces hunting through menus with a keyboard-first layer that filters as you type — and building one forces you to combine global keyboard handling, focus management and correct ARIA semantics in a single component.

🧩 Overview

Build a keyboard-driven command palette (Cmd/Ctrl+K) with fuzzy filtering, arrow-key navigation, a focus trap and proper combobox/listbox semantics.

👉 https://www.reactchallenges.com/challenges/command-palette

✅ Requirements

  • The palette is hidden on first render.
  • Clicking the trigger opens the palette.
  • Pressing Cmd/Ctrl+K opens the palette, and pressing it again closes it.
  • Pressing Escape closes the palette.
  • Clicking the backdrop closes the palette, while clicking inside the panel keeps it open.
  • When the palette opens, the search input receives focus and is empty.
  • The palette lists every command.
  • Typing filters the commands by fuzzy match: every character of the query must appear in the label in order, ignoring case.
  • When nothing matches, show No results for "<query>".
  • Clearing the query restores the full list.
  • The first command is highlighted when the palette opens and whenever the query changes.
  • ArrowDown moves the highlight to the next command, wrapping from the last one to the first.
  • ArrowUp moves the highlight to the previous command, wrapping from the first one to the last.
  • Enter executes the highlighted command and closes the palette.
  • Clicking a command executes it and closes the palette.
  • Executing a command sets the Last action text to that command's label.
  • While the palette is open, focus stays inside it when pressing Tab.

💡 Notes

  • Open and close from a single window keydown listener for Cmd/Ctrl+K and Escape, and call preventDefault().
  • Filter by subsequence, not includes ("gch" matches "Go to Challenges"), and reset activeIndex when the query changes.
  • Focus the input on open and keep focus trapped inside the panel by listening for focusin.

🧪 Tests

  1. keeps the palette hidden on first render
  2. opens the palette when the trigger is clicked
  3. opens the palette with Cmd/Ctrl+K
  4. focuses the search input when opened
  5. closes the palette when the shortcut is pressed again
  6. closes the palette on Escape
  7. closes the palette when the backdrop is clicked
  8. keeps the palette open when clicking inside the panel
  9. renders every command
  10. filters commands as the user types
  11. matches non-contiguous characters
  12. is case-insensitive
  13. shows a no-results message when nothing matches
  14. restores the full list when the query is cleared
  15. clears the query when the palette is reopened
  16. highlights the first command by default
  17. moves the highlight down with ArrowDown
  18. wraps from the first to the last with ArrowUp
  19. wraps from the last to the first with ArrowDown
  20. resets the highlight when the query changes
  21. executes the highlighted command with Enter
  22. executes a command when clicked
  23. traps focus inside the palette on Tab

If you want to practice keyboard-driven UI the way real apps do it, this challenge gives you the full loop: open, filter, navigate, execute and trap focus — with 23 tests to keep you honest.

🔥 Start the Challenge Now

Top comments (0)