Merge pull request #277 from hotwired/link-with-methods-turn-into-for…

…m-submissions

Turn links with methods into form submissions

src/core/frames/link_interceptor.ts

@@ -1,3 +1,5 @@
+import { dispatch } from "../../util"
+
 export interface LinkInterceptorDelegate {
   shouldInterceptLinkClick(element: Element, url: string): boolean
   linkClickIntercepted(element: Element, url: string): void
@@ -38,7 +40,9 @@ export class LinkInterceptor {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
         this.clickEvent.preventDefault()
         event.preventDefault()
-        this.delegate.linkClickIntercepted(event.target, event.detail.url)
+
+        this.convertLinkWithMethodClickToFormSubmission(event.target) || 
+          this.delegate.linkClickIntercepted(event.target, event.detail.url)
       }
     }
     delete this.clickEvent
@@ -48,6 +52,21 @@ export class LinkInterceptor {
     delete this.clickEvent
   }
 
+  convertLinkWithMethodClickToFormSubmission(link: Element) {
+    const linkMethod = link.getAttribute("data-turbo-method") || link.getAttribute("data-method")
+
+    if (linkMethod) {
+      const form = document.createElement("form")
+      form.method = linkMethod
+      form.action = link.getAttribute("href") || "undefined"
+
+      link.parentNode?.insertBefore(form, link)
+      return dispatch("submit", { target: form })
+    } else {
+      return false
+    }
+  }
+
   respondsToEventTarget(target: EventTarget | null) {
     const element
       = target instanceof Element

src/tests/fixtures/form.html

@@ -47,6 +47,7 @@
         <input type="hidden" name="query" value="2">
         <input type="submit">
       </form>
+      <a href="/__turbo/redirect?path=/src/tests/fixtures/form.html&greeting=Hello%20from%20a%20redirect" data-turbo-method="post" id="link-method-redirect">Redirect link</a>
     </div>
     <hr>
     <div id="no-action">

src/tests/functional/form_submission_tests.ts

@@ -331,6 +331,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.ok(fetchOptions.headers["Turbo-Frame"], "submits with the Turbo-Frame header")
   }
 
+  async "test link method form submission"() {
+    await this.clickSelector("#link-method-redirect")
+    await this.nextBody
+
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/form.html")
+    this.assert.equal(await this.visitAction, "advance")
+    this.assert.equal(await this.getSearchParam("greeting"), "Hello from a redirect")
+  }
+
   get formSubmitted(): Promise<boolean> {
     return this.hasSelector("html[data-form-submitted]")
   }