Skip to content

RadioGroup: pressing pointer down on an item selects it immediately when the group already has a value (select-on-focus fires for pointer focus) #2097

Description

@aaron-easygo

Describe the bug

When a RadioGroup already has a selected value, pressing the pointer down on another item checks it immediately on mousedown, before the click completes. Holding the mouse button down on an unchecked item shows it already in the checked state, and there is no way to see a pressed-but-unchecked state.

Cause: RadioGroupItemState.onfocus selects the item whenever the group has a value (radio-group.svelte.ts):

onfocus(_: BitsFocusEvent) {
    if (!this.root.hasValue || this.#isReadonly) return;
    this.root.setValue(this.opts.value.current);
}

A pointer press focuses the button, so this handler commits the selection on mousedown. The handler exists for keyboard select-follows-focus (arrow navigation), but it doesn't distinguish keyboard focus from pointer (or programmatic) focus. Radix React guards this with an isArrowKeyPressed flag, and Base UI selects only on click/keyboard so the same component behaves differently across ports. Native <input type="radio"> also only commits on click release, not on mousedown.

Note: this only reproduces when the group already has a value — with no selection, hasValue is false, the focus handler bails, and selection correctly commits on click.

A side effect of the same handler is programmatically focusing an unchecked item (e.g. an autofocus landing inside the group) also changes the group's value.

Reproduction

https://stackblitz.com/edit/fb2t85nr?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
  OS: macOS 26.6
  CPU: (14) arm64 Apple M4 Pro
  Memory: 1.12 GB / 48.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 26.6.0 - ~/.nvm/versions/node/v26.6.0/bin/node
  Yarn: 1.22.22 - /opt/homebrew/bin/yarn
  npm: 11.18.0 - ~/.nvm/versions/node/v26.6.0/bin/npm
  pnpm: 11.20.0 - /opt/homebrew/bin/pnpm
Browsers:
  Chrome: 151.0.7922.76
  Safari: 26.6
npmPackages:
  svelte: 5.56.8
  bits-ui: 2.18.1
  @sveltejs/kit: 2.70.1

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageA maintainer needs to review this issue and label it appropriately

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions