fix(fuselage): Select disabled opening with keyboard (#1487)

Co-authored-by: dougfabris <devfabris@gmail.com>
RocketChat · Nov 25, 2024 · 9e64011 · 9e64011
1 parent ce6bb5b
commit 9e64011
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/.changeset/gentle-eagles-run.md 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
@@ -22,12 +22,13 @@ export { Item } from 'react-stately';
 
 export const SelectAria = forwardRef(function SelectAria<T extends object>(
   {
-    disabled,
     error,
     placeholder,
     value,
     onChange,
     small,
+    isDisabled: isDisabledProps,
+    disabled,
     ...props
   }: Omit<AriaSelectProps<T>, 'value' | 'onChange'> & {
     error?: string;
@@ -38,16 +39,22 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
   } & AllHTMLAttributes<HTMLElement>,
   outerRef: Ref<HTMLElement>,
 ) {
+  const isDisabled = isDisabledProps || disabled;
+
   const state = useSelectState({
-    isDisabled: disabled,
+    isDisabled,
     selectedKey: value,
     onSelectionChange: onChange,
     ...props,
   });
 
   const { ref, borderBoxSize } = useResizeObserver<any>();
 
-  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<T extends object>(
     <>
       <Box
         {...props}
-        disabled={disabled}
+        disabled={isDisabled}
         rcx-select
         {...mergeProps(buttonProps, focusProps)}
         is='button'
@@ -71,7 +78,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
         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<T extends object>(
           triggerRef={ref}
           label={props.label}
           name={props.name}
+          isDisabled={isDisabled}
         />
         <Box
           is='span'