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`