Slash-Command Prompt Input
Problem statement
Slash commands are the modern AI input pattern. Cursor uses them for code actions, Linear for shortcuts, Notion AI for prompt templates. The pattern is identical: type /, a menu opens, fuzzy-search filters as you keep typing, arrow keys navigate, Enter selects, Esc dismisses. It looks trivial. It is not.
Build a textarea that detects when the user types / at the start of input or after whitespace, opens a popup menu of commands, filters as they type, supports full keyboard navigation, and inserts the selected command at the trigger position. Selecting via mouse should not break textarea focus. Selecting via Enter should not submit a form.
The deep insight is that the menu is a slave to the textarea's caret position, not a separate input. The trigger position is captured at the moment / is detected and used later to splice the inserted command back into the source string. Get the splice wrong and you'll either duplicate text or eat the user's content.
Requirements & constraints
- Typing '/' at start or after whitespace opens the command menu
- Menu filters by fuzzy match as the user keeps typing
- Arrow Up/Down cycles through filtered commands
- Enter inserts the active command at the trigger position
- Escape closes the menu without inserting
- Clicking an item inserts it without losing textarea focus
- Show 'No commands match' state when filter has no hits
How to approach Slash-Command Prompt Input
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem The slash-command popup looks like a UI question and is actually a focus-and-caret question wearing a UI costume. The visual design is trivial — a list of items with a highlight. The hard part is that the popup has to feel like an extension of the textarea: keyboard events stay glued to the input, focus never visibly leaves, and the caret position drives every decision the menu makes. Get any of those wrong and the experience degrades from "magical" to "fights me. " This is exactly why Notion, Linear, and Cursor put real engineering hours into a feature that looks like a weekend project. The mental model I use: the textarea is the source of truth for caret position and content.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.