Support data-turbo-action="..." on Form Submits

src/core/drive/form_submission.ts

@@ -83,6 +83,10 @@ export class FormSubmission {
     return formEnctypeFromString(this.submitter?.getAttribute("formenctype") || this.formElement.enctype)
   }
 
+  get isIdempotent() {
+    return this.fetchRequest.isIdempotent
+  }
+
   get stringFormData() {
     return [ ...this.formData ].reduce((entries, [ name, value ]) => {
       return entries.concat(typeof value == "string" ? [[ name, value ]] : [])

src/core/drive/navigator.ts

@@ -1,3 +1,4 @@
+import { Action, isAction } from "../types"
 import { FetchMethod } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { FormSubmission } from "./form_submission"
@@ -38,8 +39,8 @@ export class Navigator {
     this.stop()
     this.formSubmission = new FormSubmission(this, form, submitter, true)
 
-    if (this.formSubmission.fetchRequest.isIdempotent) {
-      this.proposeVisit(this.formSubmission.fetchRequest.url)
+    if (this.formSubmission.isIdempotent) {
+      this.proposeVisit(this.formSubmission.fetchRequest.url, { action: this.getActionForFormSubmission(this.formSubmission) })
     } else {
       this.formSubmission.start()
     }
@@ -127,4 +128,10 @@ export class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier
   }
+
+  getActionForFormSubmission(formSubmission: FormSubmission): Action {
+    const { formElement, submitter } = formSubmission
+    const action = submitter?.getAttribute("data-turbo-action") || formElement.getAttribute("data-turbo-action")
+    return isAction(action) ? action : "advance"
+  }
 }

src/tests/fixtures/navigation.html

@@ -10,7 +10,10 @@
     <section>
       <h1>Navigation</h1>
       <p><a id="same-origin-unannotated-link" href="/src/tests/fixtures/one.html">Same-origin unannotated link</a></p>
+      <p><form id="same-origin-unannotated-form" method="get" action="/src/tests/fixtures/one.html"><button>Same-origin unannotated form</button></form></p>
       <p><a id="same-origin-replace-link" href="/src/tests/fixtures/one.html" data-turbo-action="replace">Same-origin data-turbo-action=replace link</a></p>
+      <p><form id="same-origin-replace-form" method="get" action="/src/tests/fixtures/one.html" data-turbo-action="replace"><button>Same-origin data-turbo-action=replace form</button></form></p>
+      <p><form id="same-origin-replace-form-submitter" method="get" action="/src/tests/fixtures/one.html"><button data-turbo-action="replace">Same-origin data-turbo-action=replace form</button></form></p>
       <p><a id="same-origin-false-link" href="/src/tests/fixtures/one.html" data-turbo="false">Same-origin data-turbo=false link</a></p>
       <p data-turbo="false"><a id="same-origin-unannotated-link-inside-false-container" href="/src/tests/fixtures/one.html">Same-origin unannotated link inside data-turbo=false container</a></p>
       <p data-turbo="false"><a id="same-origin-true-link-inside-false-container" href="/src/tests/fixtures/one.html" data-turbo="true">Same-origin data-turbo=true link inside data-turbo=false container</a></p>

src/tests/functional/navigation_tests.ts

@@ -17,13 +17,34 @@ export class NavigationTests extends TurboDriveTestCase {
     this.assert.equal(await this.visitAction, "advance")
   }
 
+  async "test following a same-origin unannotated form[method=GET]"() {
+    this.clickSelector("#same-origin-unannotated-form button")
+    await this.nextBody
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
+    this.assert.equal(await this.visitAction, "advance")
+  }
+
   async "test following a same-origin data-turbo-action=replace link"() {
     this.clickSelector("#same-origin-replace-link")
     await this.nextBody
     this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
     this.assert.equal(await this.visitAction, "replace")
   }
 
+  async "test following a same-origin data-turbo-action=replace form[method=GET]"() {
+    this.clickSelector("#same-origin-replace-form button")
+    await this.nextBody
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
+    this.assert.equal(await this.visitAction, "replace")
+  }
+
+  async "test following a same-origin form with button[data-turbo-action=replace]"() {
+    this.clickSelector("#same-origin-replace-form-submitter button")
+    await this.nextBody
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
+    this.assert.equal(await this.visitAction, "replace")
+  }
+
   async "test following a same-origin data-turbo=false link"() {
     this.clickSelector("#same-origin-false-link")
     await this.nextBody