Build @Mentions in a textarea | Interview Question

Q: Build @Mentions in a textarea

**Target Audience:** Frontend developers preparing for a harder machine coding round. Assumes React hooks; text selection APIs, the mirror-div technique and the ARIA pattern are explained from zero. **Difficulty:** Hard > **How to read this doc:** Each idea in plain words first, then a 📌 Interview term: callout. The text logic was run with node and the component was driven on React 19.3.1 in jsdom (section 6). jsdom has no layout engine, so the pixel position of the menu was measured separately in real Chromium 141; section 6 says exactly which numbers come from where. ## 1. Why This Even Matters — A Story First Imagine passing a note in class and wanting to tag a friend. You write "@" and the person next to you, who knows everyone, leans over and whispers "Alan or Alana?". You nod at one, they write the full name neatly in your note, and hand the pen back with the tip exactly where you stopped. That whisperer has to do four things: notice the "@" at the right moment,

The problem

Question presented to candidate: "In our comment box, typing @ followed by a few letters should pop up a list of teammates right under where you are typing. Arrow keys pick one, Enter or Tab inserts it, and the cursor ends up just after the name. Build it on a plain textarea, no editor library."

Requirements:

Detect a mention token at the caret: an @ at the start of the text or after whitespace or (, followed only by handle characters up to the caret. An email address such as ada@example.com is not a mention.
Filter users by handle prefix first, then by the start of any word in their name; show at most 5.
Keyboard: ArrowUp / ArrowDown (wrapping), Enter or Tab inserts, Escape closes the menu for that token; mouse selection must not blur the textarea.
Insert @handle in place of the typed token (reusing a following space if there is one) and put the caret right after it; editing in the middle of the text must keep the text after the caret.
Show the menu at the caret position, and list who is mentioned in the text.
Accessibility: listbox and options, aria-activedescendant on the textarea, and a polite live region announcing the number of suggestions.

What a strong answer should cover:

Deriving everything (open, query, matches) from two values: the text and the caret position.
The token-detection rule and its edge cases (emails, start of text, parentheses, Escape for one token only).
Restoring the caret after a controlled update (setSelectionRange after the framework writes the value).
Getting pixel coordinates of a caret inside a textarea with a mirror element, and why it needs real layout.
Storage trade-offs: plain @handle text versus structured tokens such as @[Name](id).

Clarifying questions expected:

"Where do users come from: a fixed list or a server search as you type?"
"Must a mention be atomic, so Backspace deletes the whole name?"
"Do we store plain text or a structured format with user ids?"

Code / implementation expected: Yes. Pure helpers for detection, filtering, insertion and extraction, plus a textarea component with keyboard handling, caret restore and a positioned menu.

Text input
Keyboard
Accessibility

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a harder machine coding round. Assumes React hooks; text selection APIs, the mirror-div technique and the ARIA pattern are explained from zero. Difficulty: Hard

How to read this doc: Each idea in plain words first, then a 📌 Interview term: callout. The text logic was run with node and the component was driven on React 19.3.1 in jsdom (section 6). jsdom has no layout engine, so the pixel position of the menu was measured separately in real Chromium 141; section 6 says exactly which numbers come from where.

1. Why This Even Matters — A Story First

Imagine passing a note in class and wanting to tag a friend. You write "@" and the person next to you, who knows everyone, leans over and whispers "Alan or Alana?". You nod at one, they write the full name neatly in your note, and hand the pen back with the tip exactly where

The solution is hidden so you can try first

12 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import MentionsTextarea from "./src/components/MentionsTextarea";

const USERS = [
  { handle: "ada", name: "Ada Lovelace" },
  { handle: "alan", name: "Alan Turing" },
  { handle: "alana", name: "Alana Rivera" },
  { handle: "grace", name: "Grace Hopper" },
  { handle: "linus", name: "Linus Torvalds" },
  { handle: "margaret", name: "Margaret Hamilton" },
  { handle: "tim", name: "Tim Berners-Lee" },
];

export default function App() {
  const [text, setText] = useState("");
  return (
    <main className="page">
      <h1>Comment</h1>
      <MentionsTextarea users={USERS} value={text} onChange={setText} />
      <p className="count">{text.length} characters</p>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.