fix: open select,combobox, multiselect when disabled (#734)

* Add disabled to check if dropdown is visible

* Fix disable select color

src/components/BaseSelect/helpers.ts

@@ -1,14 +1,20 @@
 export const getListDisplayMode = ({
   isOpen,
+  disabled,
   hasItemsToSelect,
   showEmptyState,
   loading,
 }: {
   isOpen: boolean;
+  disabled: boolean;
   hasItemsToSelect: boolean;
   showEmptyState: boolean;
   loading?: boolean;
 }) => {
+  if (disabled) {
+    return "none";
+  }
+
   if (isOpen && hasItemsToSelect) {
     return "block";
   }

src/components/Combobox/Dynamic/DynamicCombobox.tsx

@@ -149,6 +149,7 @@ const DynamicComboboxInner = <T extends Option>(
           position="relative"
           display={getListDisplayMode({
             isOpen,
+            disabled,
             loading,
             hasItemsToSelect,
             showEmptyState: hasNoOptions(children),

src/components/Combobox/Static/Combobox.tsx

@@ -141,6 +141,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         <Box
           position="relative"
           display={getListDisplayMode({
+            disabled,
             hasItemsToSelect,
             isOpen,
             showEmptyState: hasNoOptions(children),

src/components/Multiselect/Dynamic/DynamicMultiselect.tsx

@@ -199,6 +199,7 @@ const DynamicMultiselectInner = <T extends Option>(
             isOpen,
             loading,
             hasItemsToSelect,
+            disabled,
             showEmptyState: hasNoOptions(children),
           })}
           className={listWrapperRecipe({ size })}

src/components/Select/Select.tsx

@@ -4,11 +4,12 @@ import {
   InputHTMLAttributes,
   ReactNode,
   forwardRef,
+  useMemo,
 } from "react";
 
 import { useFloating } from "~/hooks/useFloating";
 import { isString } from "~/utils";
-import { Box, List, PropsWithBox, Text } from "..";
+import { Box, List, PropsWithBox, Text, TextProps } from "..";
 import { HelperText, InputVariants } from "../BaseInput";
 import {
   NoOptions,
@@ -104,6 +105,18 @@ const SelectInner = <T extends Option, V extends Option | string>(
 
   const { refs, floatingStyles } = useFloating();
 
+  const labelColor = useMemo((): TextProps["color"] => {
+    if (error) {
+      return "critical1";
+    }
+
+    if (disabled) {
+      return "defaultDisabled";
+    }
+
+    return "default1";
+  }, [disabled, error]);
+
   return (
     <Box display="flex" flexDirection="column">
       <SelectWrapper
@@ -130,7 +143,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
           <Text
             size={size}
             variant="body"
-            color={error ? "critical1" : "default1"}
+            color={labelColor}
             title={selectedItem?.label}
           >
             {selectedItem?.label}
@@ -141,7 +154,8 @@ const SelectInner = <T extends Option, V extends Option | string>(
         <Box
           position="relative"
           display={getListDisplayMode({
-            isOpen,
+            isOpen: isOpen,
+            disabled,
             hasItemsToSelect,
             showEmptyState: hasNoOptions(children),
           })}