fix(Combobox/Select:): Fix focus color for selected items when using …

…`isMulti` + `isInverse` (#1570)
cengage · Nov 20, 2024 · cf959a5 · cf959a5 · github-actions · Nov 20, 2024
1 parent b2d3ac3
commit cf959a5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/selecteItemButton-focus.md 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
@@ -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`