search

wet-boew / GCWeb

Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System
https://wet-boew.github.io/GCWeb/
Other
94 stars 130 forks source link

Field Flow: Name attribute stripped on submit #1396

Open pjackson28 opened 6 years ago

pjackson28 commented 6 years ago

Scenario:

  1. Using Field Flow to add/remove classes on radio button clicks
  2. Using jQuery validation to validate on submit
  3. Split form sections up on same page with next/previous (to show/hide)
  4. Allowing submit event on next button to trigger form validation and catching it on document to prevent the form from actually submitting so can stay on the same page (moving between sections in the same page).

Problem: Field Flow strips all name attributes off of Field Flow fields which causes a problem if you click previous to return to a previous section. When you do that, the radio buttons will no longer have the name attribute so will no longer behave in a form group (so all can be selected at the same time). This is caused by https://github.com/wet-boew/GCWeb/blob/master/src/plugins/fieldflow/fieldflow.js#L1098

Workaround: I can get around this by listening for the submit event on the body element rather than document and returning false so the event never reaches Field Flow.

Suggested solution: Either no longer remove the name attribute on submit, or provide an option in Field Flow to disable that functionality.

delisma commented 4 years ago

Describe the bug Following up @pjackson28 scenario, we have noticed the same issue when using the back button in Safari mobile and desktop.

To Reproduce

  1. Open Safari on iOS or MacOS
  2. Go to http://test.canada.ca/covid-19-guidance/proto/travel/fr/group/wizard-start.html#
  3. Choose any radio button options
  4. Click the "Allez" button
  5. Click the browser's "Back" button
  6. Choose a different option

Expected behavior The expectation would be that, even if the selection state is preserve while navigating from page to page, the selection should change if a different radio button is selected.

Screenshots https://youtu.be/c0VOzCxVTHM?t=1374

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context cc @jmealing