fix enter key buy (partially)

src/app/ui/tables/inputs/numberInput.tsx

@@ -8,8 +8,9 @@ import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
+import { useFormState } from "react-dom";
 
 export default function NumberInputCell(props: CellContext<any, any>) {
   const [isActive, setIsActive] = useState(false)
@@ -18,18 +19,17 @@ export default function NumberInputCell(props: CellContext<any, any>) {
   const id = props.row.original.id
   const column = props.column.id
   const pathname = props.table.options.meta.pathname
-  let formSchema = props.column.columnDef.meta.formSchema
-
-
-  formSchema = formSchema.pick({ [column]: true })
+  const value = props.cell.getValue()
+  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       [column]: props.cell.getValue()
-    }
+    },
+    // mode: "onChange"
   })
-
+  const isDirty = form.formState.isDirty
 
   function onSubmit(value: z.infer<typeof formSchema>) {
     toast({
@@ -40,14 +40,14 @@ export default function NumberInputCell(props: CellContext<any, any>) {
         </pre>
       ),
     })
-    // updateField({
-    //   id,
-    //   table,
-    //   number: value[column],
-    //   column,
-    //   pathname
-    // })
-    // setIsActive(false)
+    updateField({
+      id,
+      table,
+      number: value[column],
+      column,
+      pathname
+    })
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -62,24 +62,42 @@ export default function NumberInputCell(props: CellContext<any, any>) {
     console.log(JSON.stringify(errors))
   }
   return (
-    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
+    <div
+      onDoubleClick={() => setIsActive(prev => !prev)}
+      className="w-full h-fit flex items-center justify-center"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.code === "Enter" && !isActive) {
+          setIsActive(true)
+        }
+      }}
+    >
       {isActive ?
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit, onErrors)}>
+          <form onSubmit={e => {
+            e.preventDefault()
+            if (isDirty) {
+              console.log("SUBMIT")
+              form.handleSubmit(onSubmit, onErrors)
+            }
+          }} >
             <FormField
               control={form.control}
               name={column}
               render={({ field }) => (
-                <FormItem>
-                  <FormControl>
+                <FormItem
+                  onBlur={() => setIsActive(false)}
+                >
+                  <FormControl
+                  >
                     <Input
                       type="number"
                       autoFocus={true}
                       step={props.column.columnDef.meta.step}
-                      onKeyDown={e => { if (e.code === "Enter") { form.handleSubmit(onSubmit, onErrors) } }}
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -87,6 +105,6 @@ export default function NumberInputCell(props: CellContext<any, any>) {
         </Form>
         : <p>{props.cell.getValue()}</p>
       }
-    </TableInputContainer>
+    </div >
   )
 }

src/app/ui/tables/inputs/textInput.tsx

@@ -41,7 +41,7 @@ export const TextInputCell = (props: CellContext<any, any>) => {
       {isActive ?
         <Input
           value={value}
-          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
+          onChange={e => setValue(e.target.value)}
           autoFocus={true}
           onBlur={handleExit}
           onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}