Add submit form on enter

Author: markusjwetzel

src/Components/Forms/FormButton.js

@@ -28,9 +28,9 @@ const FormButton = React.forwardRef(function FormButton(props, ref) {
   const { type, color, size, active, block, onPress, ...elementProps } = props;
 
   // eslint-disable-next-line no-underscore-dangle
-  const formik = useContext(FormikProvider._context);
+  const form = useContext(FormikProvider._context);
 
-  const disabled = formik.isSubmitting;
+  const disabled = form.isSubmitting;
 
   const classes = cx(
     // constant classes
@@ -50,11 +50,11 @@ const FormButton = React.forwardRef(function FormButton(props, ref) {
     }
 
     if (type === 'submit') {
-      formik.handleSubmit(event);
+      form.submitForm();
     }
 
     if (type === 'reset') {
-      formik.handleReset();
+      form.resetForm();
     }
   };
 

src/Components/Forms/FormCheckbox.js

@@ -77,6 +77,12 @@ class FormCheckbox extends React.Component {
               form.handleChange(event);
             }}
             onBlur={form.handleBlur}
+            onKeyDown={event => {
+              // Submit form on enter
+              if (event.keyCode === 13) {
+                form.submitForm();
+              }
+            }}
             className={inputClasses}
           />
           <label

src/Components/Forms/FormChoice.js

@@ -103,6 +103,12 @@ class FormChoice extends React.Component {
                     );
                   }}
                   onBlur={() => form.setFieldTouched(name, true)}
+                  onKeyDown={event => {
+                    // Submit form on enter
+                    if (event.keyCode === 13) {
+                      form.submitForm();
+                    }
+                  }}
                   className={inputClasses}
                 />
               )}
@@ -127,6 +133,12 @@ class FormChoice extends React.Component {
                     form.setFieldValue(name, newValue);
                   }}
                   onBlur={() => form.setFieldTouched(name, true)}
+                  onKeyDown={event => {
+                    // Submit form on enter
+                    if (event.keyCode === 13) {
+                      form.submitForm();
+                    }
+                  }}
                   className={inputClasses}
                 />
               )}

src/Components/Forms/FormInput.js

@@ -105,6 +105,12 @@ class FormInput extends React.Component {
               form.handleChange(event);
             }}
             onBlur={form.handleBlur}
+            onKeyDown={event => {
+              // Submit form on enter
+              if (event.keyCode === 13) {
+                form.submitForm();
+              }
+            }}
             placeholder={placeholder}
             className={inputClasses}
             autoFocus={autoFocus}