From cf959a5805306dd07081f412c9d6bcf3d8b5fbd4 Mon Sep 17 00:00:00 2001
From: Laura Silva <91160746+silvalaura@users.noreply.github.com>
Date: Wed, 20 Nov 2024 09:47:31 -0500
Subject: [PATCH] fix(Combobox/Select:): Fix focus color for selected items
 when using `isMulti` + `isInverse` (#1570)

---
 .changeset/selecteItemButton-focus.md            |  5 +++++
 .../src/components/Select/shared.ts              | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/selecteItemButton-focus.md

diff --git a/.changeset/selecteItemButton-focus.md b/.changeset/selecteItemButton-focus.md
new file mode 100644
index 000000000..3d6c82028
--- /dev/null
+++ b/.changeset/selecteItemButton-focus.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse`
diff --git a/packages/react-magma-dom/src/components/Select/shared.ts b/packages/react-magma-dom/src/components/Select/shared.ts
index 1320f150c..e2af5b7d1 100644
--- a/packages/react-magma-dom/src/components/Select/shared.ts
+++ b/packages/react-magma-dom/src/components/Select/shared.ts
@@ -55,9 +55,12 @@ export const SelectText = styled.span<{
         : props.theme.colors.neutral500;
     }
   }};
-  ${props => props.isDisabled && props.isShowPlaceholder && css`
-    opacity: ${props.isInverse ? 0.4 : 0.6}
-  `}
+  ${props =>
+    props.isDisabled &&
+    props.isShowPlaceholder &&
+    css`
+      opacity: ${props.isInverse ? 0.4 : 0.6};
+    `}
 `;
 
 export const StyledCard = styled(Card)<{
@@ -169,6 +172,13 @@ export const SelectedItemButton = styled.button<{
   white-space: nowrap;
   min-width: 0%;
   outline-offset: 2px;
+  &:focus {
+    outline: 2px solid
+      ${props =>
+        props.isInverse
+          ? props.theme.colors.focusInverse
+          : props.theme.colors.focus};
+  }
 `;
 
 export const IconWrapper = styled.span`