Skip to content

[Bug] SegmentedControl: tabbing through the control fires onChange with the first option when value matches no enabled item #3597

Description

@arham766

Description

When value doesn't match an enabled item — initial '' state, a stale server value, or the selected item disabled — no radio has tabIndex=0, so useListFocus.syncTabStops promotes the first enabled item to the tab stop. handleContainerFocus then applies selection-follows-focus and fires onChange(firstValue).

Net effect: a keyboard user mutates the form value just by tabbing past the control (verified by execution: focus a button before the control, press Tab once → onChange('grid')). Shift-Tab backwards over it does the same. Native radio groups never check a radio on Tab-in.

The code comment assumes "an initial Tab-in … is a no-op" because focus lands on the already-selected radio — which is false exactly when value is unmatched or the selected item is disabled.

Suggested fix

In handleContainerFocus, skip selection when focus is entering the group from outside:

if (!e.currentTarget.contains(e.relatedTarget as Node)) return;

Arrow/Home/End navigation still selects (focus moves within the group, so relatedTarget is inside — APG selection-follows-focus preserved), and clicks are unaffected (SegmentedControlItem.handleClick selects independently). Happy to send the PR.

Astryx Version

main (73bcac9)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions