Replace FormInterceptor with FormSubmitObserver

src/core/frames/frame_controller.ts

@@ -12,7 +12,7 @@ import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission
 import { Snapshot } from "../snapshot"
 import { ViewDelegate, ViewRenderOptions } from "../view"
 import { getAction, expandURL, urlsAreEqual, locationIsVisitable } from "../url"
-import { FormInterceptor, FormInterceptorDelegate } from "./form_interceptor"
+import { FormSubmitObserver, FormSubmitObserverDelegate } from "../../observers/form_submit_observer"
 import { FrameView } from "./frame_view"
 import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
 import { FormLinkInterceptor, FormLinkInterceptorDelegate } from "../../observers/form_link_interceptor"
@@ -25,7 +25,7 @@ export class FrameController
   implements
     AppearanceObserverDelegate,
     FetchRequestDelegate,
-    FormInterceptorDelegate,
+    FormSubmitObserverDelegate,
     FormSubmissionDelegate,
     FrameElementDelegate,
     FormLinkInterceptorDelegate,
@@ -37,7 +37,7 @@ export class FrameController
   readonly appearanceObserver: AppearanceObserver
   readonly formLinkInterceptor: FormLinkInterceptor
   readonly linkInterceptor: LinkInterceptor
-  readonly formInterceptor: FormInterceptor
+  readonly formSubmitObserver: FormSubmitObserver
   formSubmission?: FormSubmission
   fetchResponseLoaded = (_fetchResponse: FetchResponse) => {}
   private currentFetchRequest: FetchRequest | null = null
@@ -53,7 +53,7 @@ export class FrameController
     this.appearanceObserver = new AppearanceObserver(this, this.element)
     this.formLinkInterceptor = new FormLinkInterceptor(this, this.element)
     this.linkInterceptor = new LinkInterceptor(this, this.element)
-    this.formInterceptor = new FormInterceptor(this, this.element)
+    this.formSubmitObserver = new FormSubmitObserver(this, this.element)
   }
 
   connect() {
@@ -66,7 +66,7 @@ export class FrameController
       }
       this.formLinkInterceptor.start()
       this.linkInterceptor.start()
-      this.formInterceptor.start()
+      this.formSubmitObserver.start()
     }
   }
 
@@ -76,7 +76,7 @@ export class FrameController
       this.appearanceObserver.stop()
       this.formLinkInterceptor.stop()
       this.linkInterceptor.stop()
-      this.formInterceptor.stop()
+      this.formSubmitObserver.stop()
     }
   }
 
@@ -184,11 +184,11 @@ export class FrameController
 
   // Form interceptor delegate
 
-  shouldInterceptFormSubmission(element: HTMLFormElement, submitter?: HTMLElement) {
-    return this.shouldInterceptNavigation(element, submitter)
+  willSubmitForm(element: HTMLFormElement, submitter?: HTMLElement) {
+    return element.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(element, submitter)
   }
 
-  formSubmissionIntercepted(element: HTMLFormElement, submitter?: HTMLElement) {
+  formSubmitted(element: HTMLFormElement, submitter?: HTMLElement) {
     if (this.formSubmission) {
       this.formSubmission.stop()
     }

src/core/frames/frame_redirector.ts

@@ -1,27 +1,27 @@
-import { FormInterceptor, FormInterceptorDelegate } from "./form_interceptor"
+import { FormSubmitObserver, FormSubmitObserverDelegate } from "../../observers/form_submit_observer"
 import { FrameElement } from "../../elements/frame_element"
 import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
 import { expandURL, getAction, locationIsVisitable } from "../url"
 
-export class FrameRedirector implements LinkInterceptorDelegate, FormInterceptorDelegate {
+export class FrameRedirector implements LinkInterceptorDelegate, FormSubmitObserverDelegate {
   readonly element: Element
   readonly linkInterceptor: LinkInterceptor
-  readonly formInterceptor: FormInterceptor
+  readonly formSubmitObserver: FormSubmitObserver
 
   constructor(element: Element) {
     this.element = element
     this.linkInterceptor = new LinkInterceptor(this, element)
-    this.formInterceptor = new FormInterceptor(this, element)
+    this.formSubmitObserver = new FormSubmitObserver(this, element)
   }
 
   start() {
     this.linkInterceptor.start()
-    this.formInterceptor.start()
+    this.formSubmitObserver.start()
   }
 
   stop() {
     this.linkInterceptor.stop()
-    this.formInterceptor.stop()
+    this.formSubmitObserver.stop()
   }
 
   shouldInterceptLinkClick(element: Element, _url: string) {
@@ -35,14 +35,18 @@ export class FrameRedirector implements LinkInterceptorDelegate, FormInterceptor
     }
   }
 
-  shouldInterceptFormSubmission(element: HTMLFormElement, submitter?: HTMLElement) {
-    return this.shouldSubmit(element, submitter)
+  willSubmitForm(element: HTMLFormElement, submitter?: HTMLElement) {
+    return (
+      element.closest("turbo-frame") == null &&
+      this.shouldSubmit(element, submitter) &&
+      this.shouldRedirect(element, submitter)
+    )
   }
 
-  formSubmissionIntercepted(element: HTMLFormElement, submitter?: HTMLElement) {
+  formSubmitted(element: HTMLFormElement, submitter?: HTMLElement) {
     const frame = this.findFrameElement(element, submitter)
     if (frame) {
-      frame.delegate.formSubmissionIntercepted(element, submitter)
+      frame.delegate.formSubmitted(element, submitter)
     }
   }
 

src/core/session.ts

@@ -54,7 +54,7 @@ export class Session
   readonly pageObserver = new PageObserver(this)
   readonly cacheObserver = new CacheObserver()
   readonly linkClickObserver = new LinkClickObserver(this)
-  readonly formSubmitObserver = new FormSubmitObserver(this)
+  readonly formSubmitObserver = new FormSubmitObserver(this, document)
   readonly scrollObserver = new ScrollObserver(this)
   readonly streamObserver = new StreamObserver(this)
   readonly formLinkInterceptor = new FormLinkInterceptor(this, document.documentElement)

src/elements/frame_element.ts

@@ -1,5 +1,7 @@
 import { FetchResponse } from "../http/fetch_response"
 import { Snapshot } from "../core/snapshot"
+import { LinkInterceptorDelegate } from "../core/frames/link_interceptor"
+import { FormSubmitObserverDelegate } from "../observers/form_submit_observer"
 
 export enum FrameLoadingStyle {
   eager = "eager",
@@ -8,15 +10,13 @@ export enum FrameLoadingStyle {
 
 export type FrameElementObservedAttribute = keyof FrameElement & ("disabled" | "complete" | "loading" | "src")
 
-export interface FrameElementDelegate {
+export interface FrameElementDelegate extends LinkInterceptorDelegate, FormSubmitObserverDelegate {
   connect(): void
   disconnect(): void
   completeChanged(): void
   loadingStyleChanged(): void
   sourceURLChanged(): void
   disabledChanged(): void
-  formSubmissionIntercepted(element: HTMLFormElement, submitter?: HTMLElement): void
-  linkClickIntercepted(element: Element, url: string): void
   loadResponse(response: FetchResponse): void
   fetchResponseLoaded: (fetchResponse: FetchResponse) => void
   visitCachedSnapshot: (snapshot: Snapshot) => void

src/observers/form_submit_observer.ts

@@ -5,29 +5,31 @@ export interface FormSubmitObserverDelegate {
 
 export class FormSubmitObserver {
   readonly delegate: FormSubmitObserverDelegate
+  readonly eventTarget: EventTarget
   started = false
 
-  constructor(delegate: FormSubmitObserverDelegate) {
+  constructor(delegate: FormSubmitObserverDelegate, eventTarget: EventTarget) {
     this.delegate = delegate
+    this.eventTarget = eventTarget
   }
 
   start() {
     if (!this.started) {
-      addEventListener("submit", this.submitCaptured, true)
+      this.eventTarget.addEventListener("submit", this.submitCaptured, true)
       this.started = true
     }
   }
 
   stop() {
     if (this.started) {
-      removeEventListener("submit", this.submitCaptured, true)
+      this.eventTarget.removeEventListener("submit", this.submitCaptured, true)
       this.started = false
     }
   }
 
   submitCaptured = () => {
-    removeEventListener("submit", this.submitBubbled, false)
-    addEventListener("submit", this.submitBubbled, false)
+    this.eventTarget.removeEventListener("submit", this.submitBubbled, false)
+    this.eventTarget.addEventListener("submit", this.submitBubbled, false)
   }
 
   submitBubbled = <EventListener>((event: SubmitEvent) => {