Dialog: initial focus on a filled-in input doesn't select its text (Radix FocusScope did)

Open Beginner friendly
  • Is something wrong?
#490 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

The initial focus logic lives in foundation/popups/popup-features.js, in initialFocus(), which currently only chooses the element to focus. Start there and check whether the chosen element is an input before focusing it, then call select() when the new select option is set. The repro in the issue (Dialog with defaultOpen and a prefilled input) is the test case; done means selectionStart is 0 and selectionEnd is 11 on open, and the initialFocus option shape matches the one proposed in the issue.

Written by the indexing model from the issue text.

Description

Version: @ui-sdk/react / @ui-sdk/core 0.1.0-beta.2

What happens: when a Dialog, AlertDialog or Drawer opens and its initial focus (initialFocus="auto", or an element/selector/function) lands on an <input> that already holds a value, the input is focused with the caret at the end. Typing then appends to the existing value.

Expected: the input's text is selected, so typing replaces it. This is the common "Rename" dialog case: it opens on a field prefilled with the current name. Radix's FocusScope focuses with select: true, which calls input.select(). Apps moving from Radix see this as a regression.

Repro:

<Dialog defaultOpen>
  <DialogContent>
    <DialogTitle>Rename</DialogTitle>
    <input aria-label="Name" defaultValue="Spam filter" />
  </DialogContent>
</Dialog>

On open, input.selectionStart === input.selectionEnd === 11. Expected 0 and 11.

Where: foundation/popups/popup-features.js initialFocus() only picks the element. Neither the content nor initialFocus offers a way to select its text.

Ask: select the text of an input that receives initial focus (as Radix does), or add an option for it, e.g. initialFocus={{ target: "auto", select: true }}.

Workaround we use: a one-shot onFocus on the content that calls select() on the first focus after opening.

Dominant language
TypeScript
Stars
4.4k
Forks
122
Avg merge
3h 12m
Merged PRs (30d)
437

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 vercel-labs/ui

All issues in vercel-labs/ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.