From de7ff143e1cc3716b95cbe790bcfd224d0d431f5 Mon Sep 17 00:00:00 2001
From: moon-ds <entwickler.js@gmail.com>
Date: Tue, 19 Sep 2023 18:06:37 +0500
Subject: [PATCH] Fix Combobox - React doesn't recognise isError prop; Fix
 Combobox - Function components refs

---
 workspaces/core/src/combobox/Combobox.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/workspaces/core/src/combobox/Combobox.tsx b/workspaces/core/src/combobox/Combobox.tsx
index 420eaa2387..c6608a50cb 100644
--- 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}