feat: submit form on <enter>

dragonrealms-phoenix · Sep 15, 2024 · 57e9ef7 · 57e9ef7
1 parent e213989
commit 57e9ef7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/electron/renderer/components/sidebar/accounts/modal-add-account.tsx b/electron/renderer/components/sidebar/accounts/modal-add-account.tsx
@@ -38,14 +38,14 @@ export const ModalAddAccount: React.FC<ModalAddAccountProps> = (
   }, [form, initialData]);
 
   const onModalClose = useCallback(
-    (_event?: React.UIEvent) => {
+    (_event?: React.BaseSyntheticEvent) => {
       onClose();
     },
     [onClose]
   );
 
   const onModalConfirm = useCallback(
-    (event: React.UIEvent) => {
+    (event: React.BaseSyntheticEvent) => {
       runInBackground(async () => {
         const handler = form.handleSubmit(
           (data: ModalAddAccountConfirmData) => {
@@ -67,7 +67,12 @@ export const ModalAddAccount: React.FC<ModalAddAccountProps> = (
       confirmButtonText="Save"
       buttonColor="primary"
     >
-      <EuiForm component="form">
+      <EuiForm component="form" onSubmit={onModalConfirm}>
+        {/* Hidden submit button to ensure form submission on Enter key press. */}
+        {/* Since we are in a confirm modal, we don't have a visible form button. */}
+        {/* Otherwise you'd see two buttons, one for form and one for modal. */}
+        <button type="submit" hidden={true} />
+
         <EuiFormRow
           label="Name"
           isInvalid={!!form.formState.errors.accountName}

diff --git a/electron/renderer/components/sidebar/accounts/modal-edit-account.tsx b/electron/renderer/components/sidebar/accounts/modal-edit-account.tsx
@@ -38,14 +38,14 @@ export const ModalEditAccount: React.FC<ModalEditAccountProps> = (
   }, [form, initialData]);
 
   const onModalClose = useCallback(
-    (_event?: React.UIEvent) => {
+    (_event?: React.BaseSyntheticEvent) => {
       onClose();
     },
     [onClose]
   );
 
   const onModalConfirm = useCallback(
-    (event: React.UIEvent) => {
+    (event: React.BaseSyntheticEvent) => {
       runInBackground(async () => {
         const handler = form.handleSubmit(
           (data: ModalEditAccountConfirmData) => {
@@ -67,7 +67,12 @@ export const ModalEditAccount: React.FC<ModalEditAccountProps> = (
       confirmButtonText="Save"
       buttonColor="primary"
     >
-      <EuiForm component="form">
+      <EuiForm component="form" onSubmit={onModalConfirm}>
+        {/* Hidden submit button to ensure form submission on Enter key press. */}
+        {/* Since we are in a confirm modal, we don't have a visible form button. */}
+        {/* Otherwise you'd see two buttons, one for form and one for modal. */}
+        <button type="submit" hidden={true} />
+
         <EuiFormRow
           label="Name"
           isInvalid={!!form.formState.errors.accountName}

diff --git a/electron/renderer/components/sidebar/characters/modal-add-character.tsx b/electron/renderer/components/sidebar/characters/modal-add-character.tsx
@@ -77,14 +77,14 @@ export const ModalAddCharacter: React.FC<ModalAddCharacterProps> = (
   }, [form, initialData]);
 
   const onModalClose = useCallback(
-    (_event?: React.UIEvent) => {
+    (_event?: React.BaseSyntheticEvent) => {
       onClose();
     },
     [onClose]
   );
 
   const onModalConfirm = useCallback(
-    (event: React.UIEvent) => {
+    (event: React.BaseSyntheticEvent) => {
       runInBackground(async () => {
         const handler = form.handleSubmit(
           (data: ModalAddCharacterConfirmData) => {
@@ -106,7 +106,12 @@ export const ModalAddCharacter: React.FC<ModalAddCharacterProps> = (
       confirmButtonText="Save"
       buttonColor="primary"
     >
-      <EuiForm component="form">
+      <EuiForm component="form" onSubmit={onModalConfirm}>
+        {/* Hidden submit button to ensure form submission on Enter key press. */}
+        {/* Since we are in a confirm modal, we don't have a visible form button. */}
+        {/* Otherwise you'd see two buttons, one for form and one for modal. */}
+        <button type="submit" hidden={true} />
+
         <EuiFormRow
           label="Name"
           isInvalid={!!form.formState.errors.characterName}

diff --git a/electron/renderer/components/sidebar/characters/modal-edit-character.tsx b/electron/renderer/components/sidebar/characters/modal-edit-character.tsx
@@ -79,14 +79,14 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
   }, [form, initialData]);
 
   const onModalClose = useCallback(
-    (_event?: React.UIEvent) => {
+    (_event?: React.BaseSyntheticEvent) => {
       onClose();
     },
     [onClose]
   );
 
   const onModalConfirm = useCallback(
-    (event: React.UIEvent) => {
+    (event: React.BaseSyntheticEvent) => {
       runInBackground(async () => {
         const handler = form.handleSubmit(
           (data: ModalEditCharacterConfirmData) => {
@@ -108,7 +108,12 @@ export const ModalEditCharacter: React.FC<ModalEditCharacterProps> = (
       confirmButtonText="Save"
       buttonColor="primary"
     >
-      <EuiForm component="form">
+      <EuiForm component="form" onSubmit={onModalConfirm}>
+        {/* Hidden submit button to ensure form submission on Enter key press. */}
+        {/* Since we are in a confirm modal, we don't have a visible form button. */}
+        {/* Otherwise you'd see two buttons, one for form and one for modal. */}
+        <button type="submit" hidden={true} />
+
         <EuiFormRow
           label="Name"
           isInvalid={!!form.formState.errors.characterName}