Refactor(form-state): reset isSubmitted state when the user attempt…

…s to submit the form

.changeset/red-mice-clean.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+Refactor(form-state): reset `isSubmitted` state when the user attempts to submnit the form

docs/getting-started/bundle-size-overview.md

@@ -8,10 +8,10 @@ React Cool Form is a tiny size library ([~ 7KB](https://bundlephobia.com/result?
 | Name | Size |
 | --------------------------------------------------- | ------- |
 | [useForm](../api-reference/use-form) | ~ 5.6kB |
-| [useFormMethods](../api-reference/use-form-methods) | ~ 254B |
-| [useFormState](../api-reference/use-form-state) | ~ 301B |
+| [useFormMethods](../api-reference/use-form-methods) | ~ 255B |
+| [useFormState](../api-reference/use-form-state) | ~ 302B |
 | [useControlled](../api-reference/use-controlled) | ~ 783B |
-| [useFieldArray](../api-reference/use-field-array) | ~ 869B |
+| [useFieldArray](../api-reference/use-field-array) | ~ 870B |
 | [get](../api-reference/utility-functions#get) | ~ 5B |
 | [set](../api-reference/utility-functions#set) | ~ 5B |
 | [unset](../api-reference/utility-functions#unset) | ~ 6B |

docs/getting-started/form-state.md

@@ -16,18 +16,18 @@ Here we will explore the form state and some [best practices for using it](#best
 
 Form state is an `object` containing the following properties:
 
-| Name | Type | Description  |
-| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| values | `object` | The current values of the form.  |
-| errors | `object` | The current validation errors. [The shape will (should) match the shape of the form's values](./validation-guide#how-to-run).  |
-| touched | `object` | An object containing all the fields the user has touched/visited.  |
-| isDirty | `boolean` | Returns `true` if the user modifies any of the fields. `false` otherwise.  |
-| dirty | `object` | An object containing all the fields the user has modified.  |
-| isValidating | `boolean` | Returns `true` if the form is currently being validated. `false` otherwise.  |
-| isValid | `boolean` | Returns `true` if the form doesn't have any errors (i.e. the `errors` object is empty). `false` otherwise.  |
-| isSubmitting | `boolean` | Returns `true` if the form is currently being submitted. `false` if otherwise.  |
-| isSubmitted | `boolean` | Returns `true` if the form has been submitted successfully. `false` if otherwise. The value will remain until the [form is reset](./reset-form). |
-| submitCount | `number` | Number of times the user tried to submit the form. The value will remain until the [form is reset](./reset-form).  |
+| Name | Type | Description |
+| ------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| values | `object` | The current values of the form. |
+| errors | `object` | The current validation errors. [The shape will (should) match the shape of the form's values](./validation-guide#how-to-run). |
+| touched | `object` | An object containing all the fields the user has touched/visited. |
+| isDirty | `boolean` | Returns `true` if the user modifies any of the fields. `false` otherwise. |
+| dirty | `object` | An object containing all the fields the user has modified. |
+| isValidating | `boolean` | Returns `true` if the form is currently being validated. `false` otherwise. |
+| isValid | `boolean` | Returns `true` if the form doesn't have any errors (i.e. the `errors` object is empty). `false` otherwise. |
+| isSubmitting | `boolean` | Returns `true` if the form is currently being submitted. `false` if otherwise. |
+| isSubmitted | `boolean` | Returns `true` if the form has been submitted successfully. `false` if otherwise.   |
+| submitCount | `number` | Number of times the user tried to submit the form. The value will remain until the [form is reset](./reset-form). |
 
 ## Using the Form State
 

src/useForm.test.tsx

@@ -247,6 +247,7 @@ describe("useForm", () => {
  </>
  ),
  });
+
  const value = "🍎";
  fireEvent.input(getByTestId("foo"), { target: { value } });
  fireEvent.submit(getByTestId("form"));
@@ -275,6 +276,11 @@ describe("useForm", () => {
  isSubmitting: false,
  isSubmitted: true,
  });
+
+ fireEvent.submit(getByTestId("form"));
+ expect(getState("isSubmitted")).toBeFalsy();
+ await waitFor(() => expect(onSubmit).toHaveBeenCalled());
+ expect(getState("isSubmitted")).toBeTruthy();
  });
 
  it('should call "onError" event correctly', async () => {

src/useForm.ts

@@ -765,6 +765,7 @@ export default <V extends FormValues = FormValues>({
  }, stateRef.current.touched);
 
  setStateRef("touched", nextTouched);
+ setStateRef("isSubmitted", false);
  setStateRef("isSubmitting", true);
 
  try {