Knockout-Contrib / Knockout-Contrib/Knockout-Validation
Validation causes temporary flicker to invalid state CSS
- Dominant language
- JavaScript
- Stars
- 1k
- Forks
- 366
- PR merge metrics
- No merged PRs in 30d
Description
When tabbing out of a *valid* field (and the field moves from `isModified` false => true), calls are made to the css handler that temporarily put it into an invalid state.
The changed that caused this was [this one](https://github.com/Knockout-Contrib/Knockout-Validation/pull/345/files#diff-ffb09377d63483862ee6e1b831c7bbf3R83), where the function declaration order of the `h_obsValidationTrigger` and `setError` functions are reversed.
This is demonstrated in a simple JSFiddle here: https://jsfiddle.net/hlascelles/3Lz5ug8x/9/
The symptom is that any triggers/hooks that listen for DOM changes or CSS changes will fire even though the user did nothing wrong. In the example, this is shown using a CSS transition, which causes a form flicker.
Why was the method order reversed in that other PR? Could it be changed back?
Contributor guide
Research direction
Inspect the function-order change in pull request #345, focusing on h_obsValidationTrigger and setError. Reproduce the behavior with the linked JSFiddle by tabbing out of a valid field; done means no temporary invalid CSS state or related DOM/CSS trigger occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100