IgniteUI / igniteui-webcomponents / 16500190543

98%

push

github

refactor: Form associated components validity behavior (#1786)

Changed how validation is performed in the base form associated mixin class.

Before, validation was based on an internal `_dirty` flag and the `hasUpdated`
state of the form associated element. However, this was awkward when the element
is rendered/updated multiple times (ahem, React) and did not align with the behavior
of native browser form elements, more precisely the `:user-invalid` state.

Now, validation will try to stay as closely to the native `:user-invalid` behavior as possible,
with some little changes to accommodate for our own UX patterns and designs.

The important parts of the changes are the following:
* the `invalid` property **no longer reflects** back as an attribute on the element 
  and should not be used in styling rules.
* a new custom state, `ig-invalid` is exposed for styling rules and custom logic.
* Moved all the ElementInternals handling into the new controller.
* Fixed several bugs around styles and invalid states.
---------

Co-authored-by: sivanova <sivanova@infragistics.com>
Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>

4949 of 5199 branches covered (95.19%)

Branch coverage included in aggregate %.

357 of 361 new or added lines in 20 files covered. (98.89%)

32314 of 32711 relevant lines covered (98.79%)

1717.86 hits per line