Fix Combobox - React doesn't recognise isError prop; Fix Combobox - F…

…unction components refs
coingaming · Sep 19, 2023 · de7ff14 · de7ff14
1 parent 922e889
commit de7ff14
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/workspaces/core/src/combobox/Combobox.tsx b/workspaces/core/src/combobox/Combobox.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+'use client'
+
+import React, { forwardRef } from 'react';
 import {
   Combobox as HeadlessCombobox,
   Transition as HeadlessTransition,
@@ -105,11 +107,13 @@ const ComboboxRoot = ({
   );
 };
 
-const Trigger = ({
+const Trigger = forwardRef<HTMLDivElement, WithChildren<SelectProps>>(({
   children,
   className,
   innerLabel,
-}: WithChildren<SelectProps>) => {
+},
+  ref
+) => {
   const { size, input, popper, disabled, isError } =
     useComboboxContext('Combobox.Trigger');
 
@@ -136,7 +140,7 @@ const Trigger = ({
       {children}
     </div>
   );
-};
+});
 
 const Input = ({
   displayValue,
@@ -153,7 +157,6 @@ const Input = ({
       onChange={({ target: { value } }) => {
         onQueryChange ? onQueryChange(value) : () => {};
       }}
-      ref={popper?.setAnchor}
       as={NativeInput}
       displayValue={displayValue}
       placeholder={placeholder}
@@ -165,11 +168,12 @@ const Input = ({
         className
       )}
       disabled={disabled}
-      isError={isError}
+      error={isError}
       onFocus={() => input?.setIsFocused(true)}
       onBlur={() => input?.setIsFocused(false)}
       aria-label={rest['aria-label']}
       {...rest}
+      ref={popper?.setAnchor}
     />
   );
 };
@@ -190,7 +194,6 @@ const InsetInput = ({
         onChange={({ target: { value } }) => {
           onQueryChange ? onQueryChange(value) : () => {};
         }}
-        ref={popper?.setAnchor}
         as={NativeInput}
         displayValue={displayValue}
         placeholder={placeholder === undefined ? '' : `${placeholder}`}
@@ -208,11 +211,12 @@ const InsetInput = ({
           className,
           'leading-5'
         )}
-        isError={isError}
+        error={isError}
         onFocus={() => input?.setIsFocused(true)}
         onBlur={() => input?.setIsFocused(false)}
         aria-label={rest['aria-label']}
         {...rest}
+        ref={popper?.setAnchor}
       />
       <InputInset.Label className="w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden">
         {label}