Introduce FormLinkInterceptor
#631
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In an effort to match the patterns established by `LinkInterceptor` and `FormInterceptor`, this commit introduces a `FormLinkInterceptor` and `FormLinkInterceptorDelegate`. Behind the scenes, the `FormLinkInterceptor` relies on an instance of the `LinkInterceptor` to intervene in `<a>` element clicks when `[data-turbo-method]` or `[data-turbo-stream]` are present. When those clicks are detected, it creates a `<form hidden>` element, attaches it to the document, delegates to a `FormLinkInterceptorDelegate` to map the `<a>` element's attributes to the `<form>` element, submits the form through the polyfilled [HTMLFormElement.requestSubmit][] method, then removes the `<form>` from the document. The `Session` serves as a `FormLinkInterceptorDelegate`, making sure to start and stop the observer _before_ its `LinkInterceptor` instance, so that clicks that are intercepted by the `FormLinkInterceptor` are not also intercepted by the `LinkInterceptor`. [HTMLFormElement.requestSubmit]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
seanpdoyle
force-pushed
the
form-link-interceptor
branch
from
e4c1a36
to
f52a47f
Compare
| linkClickIntercepted(link: Element, action: string): void { | ||
| const form = document.createElement("form") | ||
| form.setAttribute("action", action) | ||
| form.hidden = true |
There was a problem hiding this comment.
Apologies if this edge case is already handled, I don't have a full understanding of all of the internals of Turbo.
But in the case that Turbo.session.drive = false, but on this link data-turbo="true" is specified, then wouldn't the form created by this also need to set data-turbo="true" on the form element for it to be handled by Turbo?
I have a PR open to address this (#500) but the addition of this FormLinkInterceptor would change where that behavior should be implemented.
There was a problem hiding this comment.
Thank you for raising these concerns! I've pushed up d317319 to add test coverage for the cases you've outlined.
seanpdoyle
force-pushed
the
form-link-interceptor
branch
from
d317319
to
b275a25
Compare
seanpdoyle
force-pushed
the
form-link-interceptor
branch
from
b275a25
to
2777608
Compare
|
Nice cleanup! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In an effort to match the patterns established by
LinkInterceptorand
FormInterceptor, this commit introduces aFormLinkInterceptorandFormLinkInterceptorDelegate.Behind the scenes, the
FormLinkInterceptorrelies on an instance ofthe
LinkInterceptorto intervene in<a>element clicks when[data-turbo-method]or[data-turbo-stream]are present. When thoseclicks are detected, it creates a
<form hidden>element, attaches itto the document, delegates to a
FormLinkInterceptorDelegateto mapthe
<a>element's attributes to the<form>element, submits the formthrough the polyfilled HTMLFormElement.requestSubmit method, then
removes the
<form>from the document.The
Sessionserves as aFormLinkInterceptorDelegate, making sureto start and stop the observer before its
LinkInterceptorinstance, so that clicks that are intercepted by the
FormLinkInterceptorare not also intercepted by theLinkInterceptor.