diff --git a/.changeset/gentle-eagles-run.md b/.changeset/gentle-eagles-run.md new file mode 100644 index 0000000000..442c559987 --- /dev/null +++ b/.changeset/gentle-eagles-run.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': patch +--- + +fix(fuselage): `Select` disabled opening with keyboard diff --git a/packages/fuselage/src/components/Select/SelectAria.tsx b/packages/fuselage/src/components/Select/SelectAria.tsx index bb42dc0a5b..3c7c56c40e 100644 --- a/packages/fuselage/src/components/Select/SelectAria.tsx +++ b/packages/fuselage/src/components/Select/SelectAria.tsx @@ -22,12 +22,13 @@ export { Item } from 'react-stately'; export const SelectAria = forwardRef(function SelectAria( { - disabled, error, placeholder, value, onChange, small, + isDisabled: isDisabledProps, + disabled, ...props }: Omit, 'value' | 'onChange'> & { error?: string; @@ -38,8 +39,10 @@ export const SelectAria = forwardRef(function SelectAria( } & AllHTMLAttributes, outerRef: Ref, ) { + const isDisabled = isDisabledProps || disabled; + const state = useSelectState({ - isDisabled: disabled, + isDisabled, selectedKey: value, onSelectionChange: onChange, ...props, @@ -47,7 +50,11 @@ export const SelectAria = forwardRef(function SelectAria( const { ref, borderBoxSize } = useResizeObserver(); - const { triggerProps, valueProps, menuProps } = useSelect(props, state, ref); + const { triggerProps, valueProps, menuProps } = useSelect( + { isDisabled, ...props }, + state, + ref, + ); const { buttonProps } = useButton(triggerProps, ref); @@ -59,7 +66,7 @@ export const SelectAria = forwardRef(function SelectAria( <> ( rcx-input-box--small={small} className={[ error && 'invalid', - disabled && 'disabled', + isDisabled && 'disabled', (isFocusVisible || state.isOpen) && 'focus', ] .filter(Boolean) @@ -82,6 +89,7 @@ export const SelectAria = forwardRef(function SelectAria( triggerRef={ref} label={props.label} name={props.name} + isDisabled={isDisabled} />