diff --git a/src/core/drive/form_submission.js b/src/core/drive/form_submission.js index e2fa643b2..a5007d2c5 100644 --- a/src/core/drive/form_submission.js +++ b/src/core/drive/form_submission.js @@ -1,6 +1,6 @@ import { FetchRequest, FetchMethod, fetchMethodFromString, fetchEnctypeFromString, isSafe } from "../../http/fetch_request" import { expandURL } from "../url" -import { dispatch, getAttribute, getMetaContent, hasAttribute } from "../../util" +import { clearBusyState, dispatch, getAttribute, getMetaContent, hasAttribute, markAsBusy } from "../../util" import { StreamMessage } from "../streams/stream_message" export const FormSubmissionState = { @@ -117,6 +117,7 @@ export class FormSubmission { this.state = FormSubmissionState.waiting this.submitter?.setAttribute("disabled", "") this.setSubmitsWith() + markAsBusy(this.formElement) dispatch("turbo:submit-start", { target: this.formElement, detail: { formSubmission: this } @@ -155,6 +156,7 @@ export class FormSubmission { this.state = FormSubmissionState.stopped this.submitter?.removeAttribute("disabled") this.resetSubmitterText() + clearBusyState(this.formElement) dispatch("turbo:submit-end", { target: this.formElement, detail: { formSubmission: this, ...this.result } diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html index 707640393..aa46bcd2b 100644 --- a/src/tests/fixtures/form.html +++ b/src/tests/fixtures/form.html @@ -15,7 +15,7 @@

Form

-
+ diff --git a/src/tests/functional/form_submission_tests.js b/src/tests/functional/form_submission_tests.js index 987038448..e7447944f 100644 --- a/src/tests/functional/form_submission_tests.js +++ b/src/tests/functional/form_submission_tests.js @@ -131,6 +131,25 @@ test("standard POST form submission with redirect response", async ({ page }) => ) }) + +test("sets aria-busy on the form element during a form submission", async ({ page }) => { + await page.click("#standard form.redirect input[type=submit]") + + await nextEventNamed(page, "turbo:submit-start") + assert.equal( + await nextAttributeMutationNamed(page, "standard-form", "aria-busy"), + "true", + "sets [aria-busy] on the form element" + ) + + await nextEventNamed(page, "turbo:submit-end") + assert.equal( + await nextAttributeMutationNamed(page, "standard-form", "aria-busy"), + null, + "removes [aria-busy] from the form element" + ) +}) + test("standard POST form submission events", async ({ page }) => { await page.click("#standard-post-form-submit")