feat: console.debug when auto saves are skipped. (#105)

It can be really frustrating to wonder "wtf is this not working", and
previously the fix was to "know where to go in the form-state source to
set the break point an examine the form". :-|

src/useFormState.ts

@@ -114,7 +114,12 @@ export function useFormState<T, I>(opts: UseFormStateOpts<T, I>): ObjectState<T>
         }
 
         // Don't use canSave() because we don't want to set touched for all the fields
-        if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
+        if (autoSaveRef.current && form.dirty && !isAutoSaving) {
+          // It's very frustrating to not know why the form is savings, to go ahead and log these
+          if (!form.valid) {
+            console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+            return;
+          }
           isAutoSaving = "queued";
           let maybeError: undefined | string;
           // We use setTimeout as a cheap way to wait until the end of the current event listener

src/useFormStates.ts

@@ -97,8 +97,13 @@ export function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): UseFormS
       let form = existing?.[0];
 
       async function maybeAutoSave(form: ObjectState<T>) {
-        // Don't use canSave() because we don't want to set touched for all the fields
-        if (autoSaveRef.current && form.dirty && form.valid) {
+        // Don't use form.canSave() because we don't want to set touched for all the fields
+        if (autoSaveRef.current && form.dirty) {
+          // It's very frustrating to not know why the form is savings, to go ahead and log these
+          if (!form.valid) {
+            console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+            return;
+          }
           const { current: pending } = pendingAutoSaves;
           if (isAutoSaving) {
             pending.add(form);