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

Do action interferes with other uses of the affected button #1390

Open pjackson28 opened 6 years ago

pjackson28 commented 6 years ago

An example is trying to apply use Do action on a form's submit button (e.g., button type="submit" in a form that uses wb-frmvld). If Do action is applied to the button, then it interferes with all other actions such as validating and submitting the form.

This is caused by the following line: https://github.com/wet-boew/GCWeb/blob/master/src/plugins/doaction/doaction.js#L52

By returning false for the click event, that stops form validation and submission in its tracks.

This plugin should be made to be more friendly with other plugins and processes, either by not returning false for the click event or by at least giving the option to not return false.

Personally I would prefer the option to return false, with the default being to not return false, so there is a way to prevent completion of click-related events without having to use custom JS.

duboisp commented 6 years ago

Do you have a code sample showing a use case where you want to use "Do action" and submit a form at the same time? Or a code sample that I can use to reproduce your issue?

The "Do action" plugin was designed to execute "live" action and preventing normal form submission.

pjackson28 commented 6 years ago

Here is the example: https://canada-ca.github.io/digital-playbook-guide-numerique/views-vues/automated-decision-automatise/en/algorithmic-impact-assessment.html

It needs to validate before changing to the next "page", which is actually just a hidden section on the same page. It needs the form validation to proceed without the actual final submission so validation can happen for each section rather than waiting until the end. It does it by only returning false for the submit event and not the click event, which allows the validation to proceed without interfering with validation (while avoiding a page refresh from the submit proceeding).

It doesn't use Do action because unfortunately Do action can't support this scenario yet (so uses the separate calcul.js plugin that is being worked on).

duboisp commented 6 years ago

@pjackson28 Are you looking for a plugin similar like "steps form" plugin?

Working example: https://www.thekodester.ca/wet/formvalid/steps Source Code: https://github.com/wet-boew/wet-boew/pull/7913

pjackson28 commented 6 years ago

Yes, I'm looking for a similar outcome. I took a bit of a different approach with the way I did it (using add/remove class and triggering an event) but that is pretty close to what the client is looking for.