wet-boew / wet-boew

Web Experience Toolkit (WET): Open source code library for building innovative websites that are accessible, usable, interoperable, mobile-friendly and multilingual. This collaborative open source project is led by the Government of Canada.

Home Page:https://wet-boew.github.io/wet-boew/index-en.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error summary not properly removed when used with data-rule-require_from_group attribute

legaren opened this issue · comments

Description
The error summary is not completely removed when errors from a group of fields (using data-rule-require_from_group) are resolved.

To Reproduce

  1. Create a view with multiple fields that include the same data-rule-require_from_group attribute:
2. Leave the fields empty and validate the form, this should produce errors on each field of the group and a summary with as many errors as fields. 3. Type a value in any of the fields, this will satisfy the validation rule that at least one field should be filled out. The error on each field disappears but the summary always remains with one error in it. 4. Clicking somewhere else, a different field, will trigger validations again and should finally remove the summary.

Expected behaviour
All errors in the summary should disappear when the group's rule is satisfied without having to click elsewhere or trigger validations again.

Who shall do the work?
I am asking for Principal publisher to please do the work

Additional information
The issue seems to come from the setTimeout function located in the showErrors function. When multiple fields are validated as a group, a re-entrant validation function is called which in turns calls showErrors multiple times. When the first field of the group is validated, it is assumed the other field(s) in the group are invalid, and thus, when calling showErrors the expected result is to show the summary with that error, this is done inside a setTimeout of 100ms. When the last field is finally validated and the group is considered valid, showErrors is called one last time but this time the summary is detached, this is done without a setTimeout. The summary is entirely removed but eventually the stacked setTimeouts are being processed and the summary shown again, incorrectly.

I see two ways of fixing this, removing the setTimeout from the path where the summary is displayed (there is a comment in the code that it is required because of another issue) or add a similar setTimeout to the path where the summary is removed so that they can be executed with better timing, although I feel this may not always work. I am not sure which solution is appropriate.

The faulty code is located in formvalid.js, I am using the code provided by canada.ca (wet-boew.js) but I am unsure how this is generated from formvalid.js.

//Potential fix by adding a setTimeout...
setTimeout( function() {
// Update the aria-live region as necessary
if ( ariaLive.innerHTML.length !== 0 ) {
ariaLive.innerHTML = "";
}
$form.find( "#" + errorFormId ).detach();
}, 100 );