diff --git a/src/molecules/Select/SearchBar.tsx b/src/molecules/Select/SearchBar.tsx index 9ced1b02b..50cd7dcad 100644 --- a/src/molecules/Select/SearchBar.tsx +++ b/src/molecules/Select/SearchBar.tsx @@ -196,13 +196,14 @@ export const SearchBar = ({ } /> )} - {clearable && selectedValues.length > 0 && !loading && !disabled && ( + {clearable && selectedValues.length > 0 && !loading && ( diff --git a/src/molecules/Select/Select.styles.ts b/src/molecules/Select/Select.styles.ts index 3b97f7cc1..0779287ea 100644 --- a/src/molecules/Select/Select.styles.ts +++ b/src/molecules/Select/Select.styles.ts @@ -217,6 +217,11 @@ const ClearButton = styled(Button)` height: 24px; left: 0; } + &:disabled { + svg { + fill: ${colors.interactive.disabled__text.rgba}; + } + } `; interface ComboBoxChipProps { diff --git a/src/molecules/Select/Select.types.ts b/src/molecules/Select/Select.types.ts index 2fe949cad..43a9f6c0b 100644 --- a/src/molecules/Select/Select.types.ts +++ b/src/molecules/Select/Select.types.ts @@ -87,14 +87,16 @@ type CommonListSelectProps = { groups?: undefined; }; -interface ListSelectWithAddItemProps - extends CommonListSelectProps { +interface ListSelectWithAddItemProps< + T extends SelectOptionRequired, +> extends CommonListSelectProps { onAddItem: (item: string) => void; itemSingularWord?: string; } -interface ListSelectWithoutAddItemProps - extends CommonListSelectProps { +interface ListSelectWithoutAddItemProps< + T extends SelectOptionRequired, +> extends CommonListSelectProps { onAddItem?: undefined; itemSingularWord?: undefined; } diff --git a/src/molecules/Select/SingleSelect/SingleSelect.stories.tsx b/src/molecules/Select/SingleSelect/SingleSelect.stories.tsx index 5c9740980..23dec2c8d 100644 --- a/src/molecules/Select/SingleSelect/SingleSelect.stories.tsx +++ b/src/molecules/Select/SingleSelect/SingleSelect.stories.tsx @@ -275,8 +275,8 @@ export const DisabledSingleSelect: Story = { await step('Verify that the select is disabled', () => { expect(canvas.getByRole('combobox')).toBeDisabled(); }); - await step('Verify that the clear button is not rendered', () => { - expect(canvas.queryByTestId('clearBtn')).not.toBeInTheDocument(); + await step('Verify that the clear button is disabled', () => { + expect(canvas.getByTestId('clearBtn')).toBeDisabled(); }); }, };