completed Implementation of User Event page

apps/hub/app/_components/ui/Select.tsx

@@ -11,14 +11,15 @@ import SelectTemplate, {
 } from "react-select";
 import { cn } from "../../../helper/cn";
 import dynamic from "next/dynamic";
+import { CSSProperties } from "react";
 
-interface SelectProps<T extends FieldValues> {
+interface SelectProps<T extends FieldValues>
+	extends Omit<SelectTemplateProps, "form"> {
+	label?: any;
 	name: Path<T>;
 	form: UseFormReturn<T>;
 	formOptions?: RegisterOptions<T>;
-	label?: string;
-	placeholder?: string;
-	className?: string;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 }
 
 const customStyles: StylesConfig<any, false> = {
@@ -73,7 +74,6 @@ const SelectCom = <T extends FieldValues>({
 				{label}
 			</span>
 			<SelectTemplate
-				{...form.register(name, formOptions)}
 				onChange={(newValue: any) => {
 					if (Array.isArray(newValue)) {
 						form.setValue(name, newValue.map((v: any) => v.value) as any);
@@ -82,7 +82,16 @@ const SelectCom = <T extends FieldValues>({
 					}
 					form.trigger(name);
 				}}
-				styles={customStyles}
+				value={
+					(inputProps as any)?.isMulti
+						? (inputProps as any).options?.filter((o: any) =>
+								form.watch(name)?.includes(o.value),
+							)
+						: (inputProps as any).options?.find(
+								(o: any) => o.value === form.watch(name),
+							)
+				}
+				styles={customStyles as any}
 				className={cn("w-full placeholder:text-neutral-600", className)}
 				placeholder={placeholder}
 				{...inputProps}
@@ -96,7 +105,9 @@ const SelectCom = <T extends FieldValues>({
 	);
 };
 
-const SelectWrapper = (props: any) => <SelectCom {...props} />;
+const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => (
+	<SelectCom {...props} />
+);
 
 export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
 	ssr: false,