feat: add automatic formik form submission, fixes old values in formi…

…k onChange function

package.json

@@ -88,6 +88,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "autoprefixer": "^10.0.0",
     "dayjs": "^1.0.0",
+    "debounce": "^2.1.0",
     "formik": "^2.2.9",
     "postcss-import": "^15.1.0",
     "react": "^18.2.0",

src/forms/FormikAutoSubmit.stories.tsx

@@ -0,0 +1,35 @@
+import { Form, Formik } from 'formik'
+import React from 'react'
+import FormikAutoSubmit from './FormikAutoSubmit'
+import FormikTextField from './NewFormikTextField'
+
+export const Default = () => (
+  <div>
+    <div>
+      Formik with an AutoSubmit component calls onSubmit with a given debounce
+      (here 1000)
+    </div>
+    <Formik
+      initialValues={{
+        name: '',
+      }}
+      isInitialValid={false}
+      onSubmit={async (values) => {
+        alert(`Form submitted with value: ${values.name}`)
+      }}
+    >
+      <div>
+        <Form>
+          <FormikAutoSubmit debounceWait={1000} />
+          <FormikTextField
+            name="name"
+            label="Label"
+            tooltip="Tooltip for this input"
+            className={{ root: 'mb-1 w-80' }}
+            placeholder="Placeholder"
+          />
+        </Form>
+      </div>
+    </Formik>
+  </div>
+)

src/forms/FormikAutoSubmit.tsx

@@ -0,0 +1,36 @@
+// https://github.com/jaredpalmer/formik/issues/2769#issuecomment-1872382784
+
+import debounce from 'debounce'
+import { useFormikContext } from 'formik'
+import { useEffect, useMemo } from 'react'
+
+export interface AutoSubmitProps {
+  debounceWait: number
+}
+
+export function FormikAutoSubmit({ debounceWait }: AutoSubmitProps) {
+  /*
+      This component is used to automatically submit the form when the form is valid
+      and has been changed(dirty).
+     */
+  const { isValid, values, dirty, submitForm } = useFormikContext()
+
+  // avoid repetitive calls to debounce
+  const debouncedSubmit = useMemo(
+    () =>
+      debounce(() => {
+        if (isValid && dirty) {
+          void submitForm()
+        }
+      }, debounceWait),
+    [isValid, dirty, submitForm, debounceWait]
+  )
+
+  useEffect(() => {
+    debouncedSubmit()
+  }, [isValid, values, dirty, submitForm, debouncedSubmit])
+
+  return null
+}
+
+export default FormikAutoSubmit