Knockout-Contrib / Knockout-Contrib/Knockout-Validation

Validation causes temporary flicker to invalid state CSS

Open
#673 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.