Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 7, 2021

Conversation

seanpdoyle
Copy link
Contributor

The Navigator class translates <form method="get"> submissions into
proposeVisit calls, skipping the rest of the FormSubmission
architecture.

This commit adds support for declaring [data-turbo-action="replace"]
(or "restore" or "advance") as a Visit Action. Prior to this
commit, specifying a Visit action was limited to an <a>
click-initiated Visit only.

This can be useful for a GET form driven by auto-submission driving
the current page's URL, like a Typeahead autocomplete <input type="search"> field or a bounding-box scrolling Map. In those
scenarios, a series of "advance" page visits would yield an
essentially broken "Back" and "Forward" navigation experience.

The `Navigator` class translates `<form method="get">` submissions into
`proposeVisit` calls, skipping the rest of the `FormSubmission`
architecture.

This commit adds support for declaring `[data-turbo-action="replace"]`
(or `"restore"` or `"advance"`) as a [Visit Action][]. Prior to this
commit, specifying a `Visit` action was limited to an `<a>`
click-initiated `Visit` only.

This can be useful for a `GET` form driven by auto-submission driving
the current page's URL, like a Typeahead autocomplete `<input
type="search">` field or a bounding-box scrolling Map. In those
scenarios, a series of `"advance"` page visits would yield an
essentially broken "Back" and "Forward" navigation experience.

[Visit Action]: https://turbo.hotwire.dev/handbook/drive#application-visits
@seanpdoyle seanpdoyle added bug Something isn't working invalid This doesn't seem right labels Apr 5, 2021
@sstephenson sstephenson merged commit 316ddac into hotwired:main Apr 7, 2021
@sstephenson
Copy link
Contributor

Excellent!

@seanpdoyle seanpdoyle deleted the form-data-turbo-action branch April 7, 2021 03:46
@olliekav
Copy link

@seanpdoyle Apologies for posting this on an old merge, but should this make the following work?

<%= form_for(@event, url: events_path, html: { data: { "turbo-action": "replace" }}) do |f| %>

or

<%= button_to event_path(@event), method: :delete, data: { confirm: "Delete this event?" }, form: { "data-turbo-action": "replace" } do %>

I'm trying to get this to fire on Turbo-iOS but I'm always getting an .advance

seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 27, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 27, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 27, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 29, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 29, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 29, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Sep 30, 2021
Closes hotwired/turbo-ios#44
Follow-up to hotwired#231

---

This commit follows-up [hotwired#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[hotwired#231]: hotwired#231
dhh added a commit that referenced this pull request Nov 9, 2021
* Re-structure existing Navigation tests

In preparation for `<form method="post">`-driven navigations, this
commit removes unnecessary `[method]` attributes, and renames `[id]`
attributes to communicate the verb to the test cases.

* Read `[data-turbo-action]` during Form Submissions

Closes hotwired/turbo-ios#44
Follow-up to #231

---

This commit follows-up [#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[#231]: #231

Co-authored-by: David Heinemeier Hansson <[email protected]>
@lutzcc1
Copy link

lutzcc1 commented Nov 17, 2021

@seanpdoyle Apologies for posting this on an old merge, but should this make the following work?

<%= form_for(@event, url: events_path, html: { data: { "turbo-action": "replace" }}) do |f| %>

or

<%= button_to event_path(@event), method: :delete, data: { confirm: "Delete this event?" }, form: { "data-turbo-action": "replace" } do %>

I'm trying to get this to fire on Turbo-iOS but I'm always getting an .advance

Hey @olliekav, were you able to make this work? I'm also trying to achieve a replace action on form submission to avoid the advance animation in turbo-ios

@olliekav
Copy link

olliekav commented Nov 22, 2021

@lutzcc1 Yep, it's working for me. I had to set a resolution in my package.json to a forked version of @hotwired/turbo though.

"resolutions": {
    "@hotwired/turbo": "https://github.com/olliekav/turbo#form-turbo-action"
  }

This has now been merged into the main branch now, so you can use that... #409

Challenge-Guy pushed a commit to Challenge-Guy/turbo-cfm1 that referenced this pull request Mar 8, 2025
* Re-structure existing Navigation tests

In preparation for `<form method="post">`-driven navigations, this
commit removes unnecessary `[method]` attributes, and renames `[id]`
attributes to communicate the verb to the test cases.

* Read `[data-turbo-action]` during Form Submissions

Closes hotwired/turbo-ios#44
Follow-up to hotwired/turbo#231

---

This commit follows-up [#231][], which added `[data-turbo-action]`
support for idempotent form submissions to maintain parity with
`<a>`-initiated Visits.

These changes re-use the existent `Navigator.getActionForFormSubmission`
function to determine the value for the `VisitOptions.action` options.

[#231]: hotwired/turbo#231

Co-authored-by: David Heinemeier Hansson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working invalid This doesn't seem right
Development

Successfully merging this pull request may close these issues.

4 participants