give each genrePicker cell a unique form id

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

@@ -24,7 +24,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
   const genres = props.table.options.meta.genres
   const [isActive, setIsActive] = useState(false)
 
-  async function onSubmit({ genres }: { genres: number[] }, event: Event) {
+  async function onSubmit({ genres }: { genres: number[] }) {
     event.preventDefault()
     const genresArray = genres.map((e) => { return { id: e } })
     console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
@@ -42,7 +42,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
     //   genres: genresArray,
     //   pathname
     // })
-    // setIsActive(false)
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -65,11 +65,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
       genres: value.map(e => e.id)
     }
   })
+
+  const formId = "editGenresForm" + props.cell.id
+
   return (
 
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm">
-        <Popover modal={true}>
+      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
+        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
           <FormField
             control={form.control}
             name="genres"
@@ -119,7 +122,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
                       }}
                     />
                   ))}
-                  <Button variant="ghost" form="editGenresForm">Submit</Button>
+                  <Button variant="ghost" form={formId}>Submit</Button>
                   <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
                 </PopoverContent>
                 <FormMessage />