Merge pull request #8 from rhinobase/select

fix(ui): Select component on icon click
rhinobase · Nov 16, 2023 · e7f78f2 · e7f78f2
2 parents 014439c + d6a5cea
commit e7f78f2
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/libs/ui/src/select/select.tsx b/libs/ui/src/select/select.tsx
@@ -52,13 +52,14 @@ const selectClasses = cva(
         disabled: false,
         readonly: false,
         className:
-          "border border-secondary-300 dark:border-zinc-700 focus:ring-primary-200 focus:border-primary-500 dark:focus:ring-primary-100/20 dark:focus:border-primary-400 focus:ring-2",
+          "border border-secondary-300 dark:border-zinc-700 group-focus:ring-primary-200 group-focus:border-primary-500 dark:group-focus:ring-primary-100/20 dark:group-focus:border-primary-400 group-focus:ring-2",
       },
       {
         variant: ["solid", "outline"],
         disabled: false,
         readonly: false,
-        className: "hover:border-primary-500 dark:hover:border-primary-400",
+        className:
+          "group-hover:border-primary-500 dark:group-hover:border-primary-400",
       },
       {
         variant: ["solid", "outline", "ghost"],
@@ -79,7 +80,7 @@ const selectClasses = cva(
       disabled: false,
       readonly: false,
     },
-  },
+  }
 );
 
 export type Select = Omit<
@@ -108,7 +109,7 @@ export const Select = forwardRef<HTMLSelectElement, Select>(
       isReadOnly = false,
       ...props
     },
-    forwardedRef,
+    forwardedRef
   ) => {
     const context = useFieldControlContext() ?? {
       isDisabled: false,
@@ -123,7 +124,7 @@ export const Select = forwardRef<HTMLSelectElement, Select>(
       readonly = isReadOnly || context.isReadOnly;
 
     return (
-      <div className="relative flex w-full items-center">
+      <div className="group relative flex w-full items-center">
         <select
           {...props}
           name={field_name}
@@ -139,7 +140,7 @@ export const Select = forwardRef<HTMLSelectElement, Select>(
                     disabled,
                     readonly,
                   }),
-                  className,
+                  className
                 )
           }
           ref={forwardedRef}
@@ -152,13 +153,13 @@ export const Select = forwardRef<HTMLSelectElement, Select>(
               size === "sm" && "right-2",
               size === "md" && "right-3",
               size === "lg" && "right-4",
-              "dark:text-secondary-300 absolute h-3.5 w-3.5 stroke-2",
+              "dark:text-secondary-300 absolute h-3.5 w-3.5 stroke-2 cursor-pointer pointer-events-none"
             )}
           />
         )}
       </div>
     );
-  },
+  }
 );
 
 Select.displayName = "Select";
@@ -168,7 +169,7 @@ export type SelectItem = JSX.IntrinsicElements["option"];
 export const SelectItem = forwardRef<HTMLOptionElement, SelectItem>(
   (props, forwardedRef) => {
     return <option {...props} ref={forwardedRef} />;
-  },
+  }
 );
 
 SelectItem.displayName = "SelectItem";