Use onSubmit for dialog forms.

Author: rkistner

demos/nextjs-supabase-todolist/src/app/views/todo-lists/edit/page.tsx

@@ -122,6 +122,14 @@ const TodoEditSection = () => {
           onClose={() => setShowPrompt(false)}
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
+          PaperProps={{
+            component: 'form',
+            onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
+              event.preventDefault();
+              await createNewTodo(nameInputRef.current!.value);
+              setShowPrompt(false);
+            },
+          }}
         >
           <DialogTitle id="alert-dialog-title">{'Create Todo Item'}</DialogTitle>
           <DialogContent>
@@ -130,12 +138,7 @@ const TodoEditSection = () => {
           </DialogContent>
           <DialogActions>
             <Button onClick={() => setShowPrompt(false)}>Cancel</Button>
-            <Button
-              onClick={async () => {
-                await createNewTodo(nameInputRef.current!.value);
-                setShowPrompt(false);
-              }}
-            >
+            <Button type="submit">
               Create
             </Button>
           </DialogActions>

demos/nextjs-supabase-todolist/src/app/views/todo-lists/page.tsx

@@ -97,6 +97,14 @@ export default function TodoListsPage() {
         <Dialog
           open={showPrompt}
           onClose={() => setShowPrompt(false)}
+          PaperProps={{
+            component: 'form',
+            onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
+              event.preventDefault();
+              await createNewList(nameInputRef.current!.value);
+              setShowPrompt(false);
+            },
+          }}
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
         >
@@ -107,12 +115,7 @@ export default function TodoListsPage() {
           </DialogContent>
           <DialogActions>
             <Button onClick={() => setShowPrompt(false)}>Cancel</Button>
-            <Button
-              onClick={async () => {
-                await createNewList(nameInputRef.current!.value);
-                setShowPrompt(false);
-              }}
-            >
+            <Button type="submit">
               Create
             </Button>
           </DialogActions>