From d10263d9914ea169641783a6d1b29d2fc44b8e49 Mon Sep 17 00:00:00 2001
From: freddymeta <freddytan@meta.com>
Date: Fri, 31 Jul 2026 04:35:29 +0000
Subject: [PATCH] fix(multi-selector): remove doubled focus ring on the trigger

---
 .changeset/multi-selector-doubled-focus-ring.md   |  8 ++++++++
 packages/core/src/MultiSelector/MultiSelector.tsx | 11 ++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/multi-selector-doubled-focus-ring.md

diff --git a/.changeset/multi-selector-doubled-focus-ring.md b/.changeset/multi-selector-doubled-focus-ring.md
new file mode 100644
index 0000000000000..24f2b0b7446fc
--- /dev/null
+++ b/.changeset/multi-selector-doubled-focus-ring.md
@@ -0,0 +1,8 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] MultiSelector: remove the trigger button's own focus outline so it no
+longer doubles the field wrapper's focus ring. The wrapper renders a single
+`:focus-within` ring, matching `Selector` and the other bordered inputs.
+@freddymeta
diff --git a/packages/core/src/MultiSelector/MultiSelector.tsx b/packages/core/src/MultiSelector/MultiSelector.tsx
index ac438a4d65310..992aca33d06c7 100644
--- a/packages/core/src/MultiSelector/MultiSelector.tsx
+++ b/packages/core/src/MultiSelector/MultiSelector.tsx
@@ -119,11 +119,12 @@ const styles = stylex.create({
     lineHeight: 'inherit',
     color: 'inherit',
     cursor: 'pointer',
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: '0',
+    // The wrapper (inputWrapperStyles.base) renders the focus ring via
+    // :focus-within when this button is focused, matching
+    // TextInput/NumberInput/Selector. The button must not draw its own
+    // :focus-visible outline or the two stack into a doubled ring over the
+    // trigger.
+    outline: 'none',
     borderRadius: radiusVars['--radius-element'],
   },
   triggerPlaceholder: {