diff --git a/packages/react/src/useForm.ts b/packages/react/src/useForm.ts index 73b5b6038..13b447c51 100644 --- a/packages/react/src/useForm.ts +++ b/packages/react/src/useForm.ts @@ -145,8 +145,6 @@ export default function useForm>( }, onSuccess: async (page) => { if (isMounted.current) { - setProcessing(false) - setProgress(null) setErrors({} as FormDataErrors) setHasErrors(false) setWasSuccessful(true) @@ -171,8 +169,6 @@ export default function useForm>( }, onError: (errors) => { if (isMounted.current) { - setProcessing(false) - setProgress(null) setErrors(errors as FormDataErrors) setHasErrors(true) } @@ -182,11 +178,6 @@ export default function useForm>( } }, onCancel: () => { - if (isMounted.current) { - setProcessing(false) - setProgress(null) - } - if (options.onCancel) { return options.onCancel() } diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.ts index cc6285f81..b0a8283aa 100644 --- a/packages/svelte/src/useForm.ts +++ b/packages/svelte/src/useForm.ts @@ -211,8 +211,6 @@ export default function useForm>( } }, onSuccess: async (page: Page) => { - setFormState('processing', false) - setFormState('progress', null) this.clearErrors() setFormState('wasSuccessful', true) setFormState('recentlySuccessful', true) @@ -233,8 +231,6 @@ export default function useForm>( return onSuccess }, onError: (errors: Errors) => { - setFormState('processing', false) - setFormState('progress', null) this.clearErrors().setError(errors as FormDataErrors) if (options.onError) { @@ -242,9 +238,6 @@ export default function useForm>( } }, onCancel: () => { - setFormState('processing', false) - setFormState('progress', null) - if (options.onCancel) { return options.onCancel() } diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts index aa241b30e..0e4124594 100644 --- a/packages/vue3/src/useForm.ts +++ b/packages/vue3/src/useForm.ts @@ -194,8 +194,6 @@ export default function useForm>( } }, onSuccess: async (page) => { - this.processing = false - this.progress = null this.clearErrors() this.wasSuccessful = true this.recentlySuccessful = true @@ -214,8 +212,6 @@ export default function useForm>( return onSuccess }, onError: (errors) => { - this.processing = false - this.progress = null this.clearErrors().setError(errors) if (options.onError) { @@ -223,9 +219,6 @@ export default function useForm>( } }, onCancel: () => { - this.processing = false - this.progress = null - if (options.onCancel) { return options.onCancel() } diff --git a/tests/form-helper.spec.ts b/tests/form-helper.spec.ts index 08a68e3bb..40203a681 100644 --- a/tests/form-helper.spec.ts +++ b/tests/form-helper.spec.ts @@ -752,36 +752,6 @@ test.describe('Form Helper', () => { await expect(pageData).toHaveProperty('version') }) - test('marks the form as no longer processing', async ({ page }) => { - await page.getByRole('button', { exact: true, name: 'onSuccess resets processing' }).click() - - const data = await waitForDataMessages(page, 7) - - const processing = data.find((d) => d.event === 'onStart' && d.type === 'processing').data - const notProcessing = data.find((d) => d.event === 'onFinish' && d.type === 'processing').data - - await expect(processing).toBe(true) - await expect(notProcessing).toBe(false) - }) - - test('resets the progress property back to null', async ({ page }) => { - await clickAndWaitForResponse(page, 'onSuccess progress property', 'sleep', 'button') - - const messages = await waitForEventMessages(page, 5) - const data = await waitForDataMessages(page, 5) - const event = data.find((d) => d.event === 'onProgress' && d.type === 'progress').data - const endEvent = data.find((d) => d.event === 'onFinish' && d.type === 'progress').data - - await expect(event).toHaveProperty('percentage') - await expect(event).toHaveProperty('total') - await expect(event).toHaveProperty('loaded') - await expect(event.percentage).toBeGreaterThanOrEqual(0) - await expect(event.percentage).toBeLessThanOrEqual(100) - - await expect(messages[4]).toBe('onFinish') - await expect(endEvent).toBeNull() - }) - test('can delay onFinish from firing by returning a promise', async ({ page }) => { await clickAndWaitForResponse(page, 'onSuccess promise', '/dump/post', 'button') @@ -869,42 +839,6 @@ test.describe('Form Helper', () => { await expect(errors.name).toBe('Some name error') }) - test('marks the form as no longer processing', async ({ page }) => { - await clickAndWaitForResponse(page, 'onError resets processing', 'form-helper/events/errors', 'button') - - const messages = await waitForEventMessages(page, 5) - const data = await waitForDataMessages(page, 5) - - await expect(messages).toEqual(['onBefore', 'onCancelToken', 'onStart', 'onError', 'onFinish']) - - const processing = data.find((d) => d.event === 'onStart' && d.type === 'processing').data - const notProcessing = data.find((d) => d.event === 'onFinish' && d.type === 'processing').data - - await expect(processing).toBe(true) - await expect(notProcessing).toBe(false) - }) - - test('resets the progress property back to null', async ({ page }) => { - await clickAndWaitForResponse(page, 'onError progress property', 'form-helper/events/errors', 'button') - - const messages = await waitForEventMessages(page, 4) - const data = await waitForDataMessages(page, 4) - - await expect(messages[3]).toBe('onProgress') - - const event = data.find((d) => d.event === 'onProgress' && d.type === 'progress').data - const finishEvent = data.find((d) => d.event === 'onFinish' && d.type === 'progress').data - - await expect(event).toHaveProperty('percentage') - await expect(event).toHaveProperty('total') - await expect(event).toHaveProperty('loaded') - await expect(event.percentage).toBeGreaterThanOrEqual(0) - await expect(event.percentage).toBeLessThanOrEqual(100) - - await expect(messages[4]).toBe('onError') - await expect(finishEvent).toBeNull() - }) - test('sets form errors', async ({ page }) => { await clickAndWaitForResponse(page, 'Errors set on error', 'form-helper/events/errors', 'button') @@ -948,6 +882,36 @@ test.describe('Form Helper', () => { await expect(messages).toEqual(['onBefore', 'onCancelToken', 'onStart', 'onSuccess', 'onFinish']) }) + + test('marks the form as no longer processing', async ({ page }) => { + await page.getByRole('button', { exact: true, name: 'onSuccess resets processing' }).click() + + const data = await page.evaluate(() => (window as any).data) + + const processing = data.find((d) => d.event === 'onStart' && d.type === 'processing').data + const notProcessing = data.find((d) => d.event === 'onFinish' && d.type === 'processing').data + + await expect(processing).toBe(true) + await expect(notProcessing).toBe(false) + }) + + test('resets the progress property back to null', async ({ page }) => { + await clickAndWaitForResponse(page, 'onSuccess progress property', 'sleep', 'button') + + const messages = await page.evaluate(() => (window as any).events) + const data = await page.evaluate(() => (window as any).data) + const event = data.find((d) => d.event === 'onProgress' && d.type === 'progress').data + const endEvent = data.find((d) => d.event === 'onFinish' && d.type === 'progress').data + + await expect(event).toHaveProperty('percentage') + await expect(event).toHaveProperty('total') + await expect(event).toHaveProperty('loaded') + await expect(event.percentage).toBeGreaterThanOrEqual(0) + await expect(event.percentage).toBeLessThanOrEqual(100) + + await expect(messages[4]).toBe('onFinish') + await expect(endEvent).toBeNull() + }) }) }) })