Input Field Validation is Delayed

[JDavidStevens]

Summary

If a required field is left blank or invalid information is added into an input field, tabbing or clicking out of the input box does not trigger the validation error message immediately.

Reproduction

Steps to reproduce:

This can be tested using the Cashmere Input-Required example

1. Tab into or click inside the required input field.
2. Leave the field blank
3. Tab out of the field or click outside of it with your mouse

The validation message does not appear at that point. It requires clicking back into the input field and then clicking out of it again, or multiple mouse clicks outside of the field before the validation message activates.

Additional Info
From Andrew Frueh:
"In older versions of Cashmere, there was a constant DoCheck loop that would check for changes to error state. Now it only listens for changes to the valid status or form submit"
See input.directive.ts
"and then also if you look at line 217 there, you’ll see that the control needs to be touched before the control will throw an error...
unfortunately there isn’t a way to listen for changes to the touched state - so on line 129 you’ll see that onBlur there is a call to check the error state again"

[andrew-frueh]

Fascinating! This is one where Chrome and Firefox behave differently. I do all my dev on Firefox which is why I missed this one. This bug actually doesn't appear in Firefox, but I can reproduce as you described in Chrome. Working on a fix now.

[health-catalyst]

🎉 This issue has been resolved in version 14.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀