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.

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

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

Open
legaren opened this issue Feb 15, 2024 · 0 comments

Comments

@legaren
Copy link

legaren commented Feb 15, 2024

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 );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant