diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index 5757e15..6037053 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -30,6 +30,7 @@ export interface SubProps extends SelectProps {
downshiftProps: {
initialSelectedItem?: Option;
onSelectedItemChange?: any;
+ isItemDisabled?: (item: Option) => boolean;
};
}
@@ -190,7 +191,6 @@ export const SelectMonoAux = ({
item,
index,
isActive,
- disabled: item.disabled,
})}
>
{item.label}
diff --git a/packages/react/src/components/Forms/Select/mono-searchable.tsx b/packages/react/src/components/Forms/Select/mono-searchable.tsx
index e2c26dd..5223858 100644
--- a/packages/react/src/components/Forms/Select/mono-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/mono-searchable.tsx
@@ -53,6 +53,7 @@ export const SelectMonoSearchable = (props: SubProps) => {
wrapperProps: {
onClick: () => {
inputRef.current?.focus();
+ downshiftReturn.openMenu();
},
},
toggleButtonProps: downshiftReturn.getToggleButtonProps({
@@ -65,12 +66,10 @@ export const SelectMonoSearchable = (props: SubProps) => {
>
{
- inputProps.onFocus(e);
+ onFocus={() => {
setHasInputFocused(true);
}}
- onBlur={(e) => {
- inputProps.onBlur(e);
+ onBlur={() => {
setHasInputFocused(false);
}}
/>
diff --git a/packages/react/src/components/Forms/Select/mono.tsx b/packages/react/src/components/Forms/Select/mono.tsx
index 7d7d9d2..8b10d31 100644
--- a/packages/react/src/components/Forms/Select/mono.tsx
+++ b/packages/react/src/components/Forms/Select/mono.tsx
@@ -44,6 +44,7 @@ export const SelectMono = (props: SelectProps) => {
},
});
},
+ isItemDisabled: (item) => !!item.disabled,
};
return props.searchable ? (
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index ecebdae..13bb577 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -203,7 +203,6 @@ export const SelectMultiAux = ({
{...downshiftReturn.getItemProps({
item: option,
index,
- disabled: option.disabled,
})}
>
{option.label}
diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx
index b836b3f..e79a821 100644
--- a/packages/react/src/components/Forms/Select/multi-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx
@@ -76,6 +76,7 @@ export const SelectMultiSearchable = (props: SubProps) => {
break;
}
},
+ isItemDisabled: (item) => !!item.disabled,
});
const inputProps = downshiftReturn.getInputProps({
@@ -118,6 +119,7 @@ export const SelectMultiSearchable = (props: SubProps) => {
wrapperProps: {
onClick: () => {
inputRef.current?.focus();
+ downshiftReturn.openMenu();
},
},
toggleButtonProps: downshiftReturn.getToggleButtonProps(),
@@ -127,12 +129,10 @@ export const SelectMultiSearchable = (props: SubProps) => {
{
- inputProps.onFocus(e);
+ onFocus={() => {
setHasInputFocused(true);
}}
- onBlur={(e) => {
- inputProps.onBlur(e);
+ onBlur={() => {
setHasInputFocused(false);
}}
size={4}
diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx
index 825ea31..4b692f3 100644
--- a/packages/react/src/components/Forms/Select/multi-simple.tsx
+++ b/packages/react/src/components/Forms/Select/multi-simple.tsx
@@ -64,6 +64,7 @@ export const SelectMultiSimple = (props: SubProps) => {
break;
}
},
+ isItemDisabled: (item) => !!item.disabled,
});
return (
@@ -86,7 +87,7 @@ export const SelectMultiSimple = (props: SubProps) => {
preventKeyAction: downshiftReturn.isOpen,
}),
disabled: props.disabled,
- onClick: (e) => {
+ onClick: (e: React.MouseEvent): void => {
// As the wrapper also has an onClick handler, we need to stop the event propagation here on it will toggle
// twice the menu opening which will ... do nothing :).
e.stopPropagation();
diff --git a/packages/react/src/components/Forms/Select/test-utils.tsx b/packages/react/src/components/Forms/Select/test-utils.tsx
index 2667a6a..870598b 100644
--- a/packages/react/src/components/Forms/Select/test-utils.tsx
+++ b/packages/react/src/components/Forms/Select/test-utils.tsx
@@ -30,7 +30,7 @@ export const expectOptionToBeUnselected = (option: HTMLLIElement) => {
);
};
export const expectOptionToBeDisabled = (option: HTMLLIElement) => {
- expect(option).toHaveAttribute("disabled");
+ expect(option).toHaveAttribute("aria-disabled");
expect(Array.from(option.classList)).contains(
"c__select__menu__item--disabled",
);