complete register form

src/components/common/combo-box.tsx

@@ -1,6 +1,6 @@
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
 import { ArrowDown2 } from 'iconsax-react'
-import { useState } from 'react'
+import { FC, useState } from 'react'
 
 const value = [
     { id: 1, name: 'تهران' },
@@ -10,9 +10,13 @@ const value = [
     { id: 5, name: 'تبریز' },
 ]
 
-export const ComboBox = () => {
+type Props = {
+    field?: any
+}
+
+export const ComboBox: FC<Props> = ({ field }) => {
     const [query, setQuery] = useState('')
-    const [selected, setSelected] = useState(value[1])
+    // const [selected, setSelected] = useState(value[1])
 
     const filteredValue =
         query === ''
@@ -22,12 +26,15 @@ export const ComboBox = () => {
             })
 
     return (
-        <Combobox value={selected} onChange={(value: any) => setSelected(value)} onClose={() => setQuery('')}>
+        <Combobox value={field.value} onChange={field.onChange} onClose={() => setQuery('')}>
             <div className="relative w-full">
                 <ComboboxInput
                     className="input-style"
                     displayValue={(person: any) => person?.name}
                     onChange={(event) => setQuery(event.target.value)}
+                    ref={field.ref}
+                    name={field.name}
+                    onBlur={field.onBlur}
                 />
                 <ComboboxButton className="absolute top-0 h-full bg-transparent">
                     <ArrowDown2 className="size-5 absolute left-3 top-5 p-0 text-secondary-text-color/70" />