Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add option to disable turbo for form or optin to forms. #419

Merged
merged 1 commit into from
May 10, 2022
Merged

Add option to disable turbo for form or optin to forms. #419

merged 1 commit into from
May 10, 2022

Conversation

pythonandchips
Copy link
Contributor

In large application upgrading from turbolinks to turbo requires all
forms that use render to return validations errors needs to be
updated with status: :unprocessable_entity to as in #39 to.
This makes it hard to upgrade as you ether have to have a single PR that
upgrades all form (when you have over 400 forms is pretty risky) or
disable all forms which again can be risky if you miss one before
completing the upgrade.

There are other options but it would be great if you can could do this in
turbo and save hours of work.

To allow this I've added a formMode to the session so you can change
the behaviour of turbo and how it interacts with forms.

The mode is set via the Tubro.setFormMode option and can be set to one
of 3 options:

  • "on" all forms will be submitted with turbo, this is the default
  • "off" forms will not be submitted with turbo
  • "optin" forms by default will not be submitted with turbo unless the
    form is annotated with data-turbo="true" attribute.

Adding these options will allow user of turbo to decide how forms should
work and make upgrading easier.

@pythonandchips
Copy link
Contributor Author

Seems to be no interest on this from the owners and as its behind now will close this off

@dhh
Copy link
Member

dhh commented May 9, 2022

I think this is actually solid. Missed on the first go around. Please do update and I'll merge 👍

@dhh dhh reopened this May 9, 2022
@pythonandchips pythonandchips force-pushed the form-submission-options branch from 4a1a5c7 to 4b738d4 Compare May 9, 2022 17:24
@pythonandchips
Copy link
Contributor Author

@dhh that it all updated with main. Assuming it passes the CI test should be good to merge

@pythonandchips
Copy link
Contributor Author

Doh, forgot to run the linter check locally. I'll get those fixed up just now

@pythonandchips
Add option to disable turbo for form or optin to forms.
67ea576 
In large application upgrading from turbolinks to turbo requires all
forms that use `render` to return validations errors needs to be
updated with `status: :unprocessable_entity` to as in 4670f2b to.
This makes it hard to upgrade as you ether have to have a single PR that
upgrades all form (when you have over 400 forms is pretty risky) or
disable all forms which again can be risky if you miss one before
completing the upgrade.

There are options but it would be great if you can could do this in
turbo and save hours of work.

To allow this I've added a `formMode` to the session so you can change
the behaviour of turbo and how it interacts with forms.

The mode is set via the `Tubro.setFormMode` option and can be set to one
of 3 options:
- "on" all forms will be submitted with turbo, this is the default
- "off" forms will not be submitted with turbo
- "optin" forms by default will not be submitted with turbo unless the
  form is annotated with `data-turbo="true"` attribute.

Adding these options will allow user of turbo to decide how forms should
work and make upgrading easier.
@pythonandchips pythonandchips force-pushed the form-submission-options branch from 4b738d4 to 67ea576 Compare May 10, 2022 08:31
@pythonandchips
Copy link
Contributor Author

That should be it good for another CI run if someone can kick off a run.

@dhh dhh merged commit e2d5305 into hotwired:main May 10, 2022
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Jul 30, 2022
@seanpdoyle
Expand Turbo.setFormMode guards
af184b3 
Follow-up to hotwired#655
Follow-up to hotwired#419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
@seanpdoyle seanpdoyle mentioned this pull request Jul 30, 2022
Merged
@seanpdoyle
Copy link
Contributor

I've opened #658 to expand coverage to include <form> submissions that don't have submitter buttons (for example, typing enter into an <input type="text"> to submit).

seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Jul 30, 2022
@seanpdoyle
Expand Turbo.setFormMode guards
6feadc8 
Follow-up to hotwired#655
Follow-up to hotwired#419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Jul 30, 2022
@seanpdoyle
Expand Turbo.setFormMode guards
01d3300 
Follow-up to hotwired#655
Follow-up to hotwired#419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Jul 30, 2022
@seanpdoyle
Expand Turbo.setFormMode guards
92996ba 
Follow-up to hotwired#655
Follow-up to hotwired#419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
seanpdoyle added a commit to seanpdoyle/turbo that referenced this pull request Jul 30, 2022
@seanpdoyle
Expand Turbo.setFormMode guards
db7f233 
Follow-up to hotwired#655
Follow-up to hotwired#419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
dhh pushed a commit that referenced this pull request Jul 31, 2022
@seanpdoyle
Expand Turbo.setFormMode guards (#658)
d2443b6 
Follow-up to #655
Follow-up to #419

This commit splits out a `form_mode_tests.ts` module separate from
`form_submission_tests.ts`, along with a `form_mode.html` fixture file.

Next, add test fixtures and test coverage for more thorough coverage of
form mode, namely scenarios that submit a form without a submitter (for
example, typing into an `<input type="text">` and pressing
<kbd>enter</kbd>.

Next, the `Turbo.setFormMode()` should be particular about its
argument's value. This commit introduces a `FormMode = "on" | "off" |
"optin"` type.

Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`,
and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of
arguments.
@seanpdoyle seanpdoyle mentioned this pull request Aug 8, 2022
Closed
@caiofct caiofct mentioned this pull request Jun 28, 2023
Closed
@jrochkind
Copy link

jrochkind commented Jan 6, 2024 •
edited
Loading

Is this feature documented anywhere? Should it be? Google search for site:turbo.hotwired.dev setFormMode has no hits.

Lack of documentation makes it hard to discover, and hard to know what the intended correct behavior is. People seem to find out about this feature either from this PR, or from various StackOverflow and blog posts, which may or may not contain current correct information. There are also confusing cases that could be addresed, such as in this Stackoverflow answer.

@nzifnab nzifnab mentioned this pull request May 6, 2024
Closed
@brunoprietog brunoprietog mentioned this pull request Jun 22, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@pythonandchips @dhh @seanpdoyle @jrochkind