diff --git a/packages/react-magma-dom/src/components/Select/MultiSelect.test.js b/packages/react-magma-dom/src/components/Select/MultiSelect.test.js index 8502d0a4d..1e368cd7b 100644 --- a/packages/react-magma-dom/src/components/Select/MultiSelect.test.js +++ b/packages/react-magma-dom/src/components/Select/MultiSelect.test.js @@ -563,7 +563,6 @@ describe('Select', () => { fireEvent.click(renderedSelect); expect(getByText('Red')).toHaveAttribute('aria-disabled', 'true'); - expect(getByText('Red')).toHaveStyleRule('cursor', 'not-allowed'); expect(getByText('Blue')).toHaveAttribute('aria-disabled', 'false'); expect(getByText('Green')).toHaveAttribute('aria-disabled', 'false'); }); diff --git a/packages/react-magma-dom/src/components/Select/MultiSelect.tsx b/packages/react-magma-dom/src/components/Select/MultiSelect.tsx index fd989ef9c..de61b550b 100644 --- a/packages/react-magma-dom/src/components/Select/MultiSelect.tsx +++ b/packages/react-magma-dom/src/components/Select/MultiSelect.tsx @@ -55,7 +55,7 @@ export function MultiSelect(props: MultiSelectProps) { i => itemToString(i) === itemToString(itemToCheck) ); - return !isItemDisabled(itemToCheck) && itemIndex !== -1; + return !isItemDisabled(itemToCheck) && itemIndex !== -1 && !isItemDisabled(items[itemIndex]); } function getFilteredItemIndex(item: T, filteredItems: T[]) { diff --git a/packages/react-magma-dom/src/components/Select/Select.test.js b/packages/react-magma-dom/src/components/Select/Select.test.js index f132b3da1..38bc445a9 100644 --- a/packages/react-magma-dom/src/components/Select/Select.test.js +++ b/packages/react-magma-dom/src/components/Select/Select.test.js @@ -640,7 +640,6 @@ describe('Select', () => { fireEvent.click(renderedSelect); expect(getByText('Red')).toHaveAttribute('aria-disabled', 'true'); - expect(getByText('Red')).toHaveStyleRule('cursor', 'not-allowed'); expect(getByText('Blue')).toHaveAttribute('aria-disabled', 'false'); expect(getByText('Green')).toHaveAttribute('aria-disabled', 'false'); }); diff --git a/packages/react-magma-dom/src/components/Select/Select.tsx b/packages/react-magma-dom/src/components/Select/Select.tsx index 41fbe3c49..763c6e69a 100644 --- a/packages/react-magma-dom/src/components/Select/Select.tsx +++ b/packages/react-magma-dom/src/components/Select/Select.tsx @@ -67,7 +67,7 @@ export function Select(props: SelectProps) { i => itemToString(i) === itemToString(itemToCheck) ); - if (itemIndex === -1 || isItemDisabled(itemToCheck)) { + if (itemIndex === -1 || isItemDisabled(itemToCheck) || isItemDisabled(items[itemIndex])) { return { [key]: null }; } diff --git a/packages/react-magma-dom/src/components/Select/shared.ts b/packages/react-magma-dom/src/components/Select/shared.ts index f1e2f8ff2..89d229f4d 100644 --- a/packages/react-magma-dom/src/components/Select/shared.ts +++ b/packages/react-magma-dom/src/components/Select/shared.ts @@ -182,6 +182,14 @@ export const SelectedItemButton = styled.button<{ position: relative; 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`