make inputs work with Enter

src/app/story/columns.tsx

@@ -4,12 +4,10 @@ import { StoryWithGenres } from "./page"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
-import { actions } from "app/ui/tables/actions"
-import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
 import NumberInputCell from "app/ui/tables/inputs/numberInput"
 import { formSchema } from "app/ui/forms/story"
-
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
 const columnHelper = createColumnHelper<StoryWithGenres>()
 
 export const columns: ColumnDef<StoryWithGenres>[] = [

src/app/tailwind.css

@@ -959,6 +959,14 @@ body {
   width: 100vw;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }

src/app/ui/forms/pub.tsx

@@ -3,7 +3,6 @@
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import { Button } from "@/components/ui/button"
 import {
 	Form,
 	FormControl,
@@ -16,12 +15,6 @@ import {
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
 
-import {
-	Popover,
-	PopoverContent,
-} from "@/components/ui/popover"
-import GenresTrigger from "./genresTrigger"
-import GenreCheckbox from "./genreCheckbox"
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
 import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"

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

@@ -64,7 +64,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
       className="w-full h-fit flex items-center justify-center"
       tabIndex={0}
       onKeyDown={e => {
-        if (e.code === "Space" && !isActive) {
+        if (e.code === "Enter" && !isActive) {
           e.preventDefault()
           setIsActive(true)
         }
@@ -84,6 +84,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
+                      className="w-24"
                       type="number"
                       autoFocus={true}
                       step={props.column.columnDef.meta?.step}

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

@@ -26,7 +26,7 @@ export function TextInputCell(props: CellContext<any, any>) {
     },
   })
 
-  function onSubmit(value: z.infer<typeof formSchema>) {
+  async function onSubmit(value: z.infer<typeof formSchema>) {
     toast({
       title: "You submitted the following values:",
       description: (
@@ -35,7 +35,7 @@ export function TextInputCell(props: CellContext<any, any>) {
         </pre>
       ),
     })
-    updateField({
+    const res = await updateField({
       id,
       table,
       string: value[column],
@@ -62,7 +62,7 @@ export function TextInputCell(props: CellContext<any, any>) {
       className="w-full h-fit flex items-center justify-center"
       tabIndex={0}
       onKeyDown={e => {
-        if (e.code === "Space" && !isActive) {
+        if (e.code === "Enter" && !isActive) {
           e.preventDefault()
           setIsActive(true)
         }