diff --git a/.changeset/fix-selector-double-focus-ring.md b/.changeset/fix-selector-double-focus-ring.md new file mode 100644 index 0000000000000..da00c9518c2ae --- /dev/null +++ b/.changeset/fix-selector-double-focus-ring.md @@ -0,0 +1,10 @@ +--- +'@astryxdesign/core': patch +--- + +[fix] Remove doubled focus ring on `Selector`. The inner combobox button drew +its own `:focus-visible` outline on top of the wrapper's `:focus-within` ring, +producing a stacked, rounded outline over the trigger after selecting an option +or navigating with the keyboard. The button now defers to the wrapper's focus +ring, matching `TextInput` and `NumberInput`. +@cixzhang diff --git a/packages/core/src/Selector/Selector.tsx b/packages/core/src/Selector/Selector.tsx index 565e386e21c4a..e97973e41b8dc 100644 --- a/packages/core/src/Selector/Selector.tsx +++ b/packages/core/src/Selector/Selector.tsx @@ -107,12 +107,11 @@ const styles = stylex.create({ lineHeight: 'inherit', color: 'inherit', cursor: 'pointer', - outline: { - default: 'none', - ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`, - }, - outlineOffset: '0', - borderRadius: radiusVars['--radius-element'], + // The wrapper (inputWrapperStyles.base) renders the focus ring via + // :focus-within when this button is focused, matching TextInput/NumberInput. + // The button must not draw its own :focus-visible outline or the two stack + // into a doubled ring over the trigger. + outline: 'none', }, triggerPlaceholder: { color: colorVars['--color-text-secondary'],