Invalid class disappears on focus out/blur event for textfield

[mormarijn]

Hi,

I'm experiencing problems with invalid textfields losing the invalid class on focus out / blur event of input field.
The same behavior can also be seen on the demo page https://material.balmjs.com/#/data-input/textfield below 1.1.
If you select Use Helper Text, Make helper text persistent, and Use helper text as validation message, then at first the invalid class is on the mdc-textfield div: mdc-text-field mdc-text-field--filled mdc-ripple-upgraded mdc-text-field--invalid.
However, when you click outside the textfield, the textfield loses its --invalid class and appears to be normal input again, while it should still be invalid: mdc-text-field mdc-text-field--filled mdc-ripple-upgraded.

If you look at how it should be working according to the specs (https://material.io/components/text-fields/) :

and if you then focus out:

Am I doing something wrong, or what should I do to enforce the --invalid class to stay on the invalid input?

I am looking forward to hearing from you soon. Thanks in advance.

Kind regards,
Marijn

[elf-mouse]

Hi @mormarijn ,

This is how the current version behaves, I will consider improving it.

Thanks for you issue.

And welcome to pr :)

[qiuyanghui]

I am experiencing the same issue, is this issue fixed? if this is fixed , which version has the fix?
Thanks

[qiuyanghui]

I got this resolved by setting useNativeValidation = false

[elf-mouse]

Hi @mormarijn @qiuyanghui ,

This bug has been fixed! You can try balm-ui@next(v10.0.3) and enjoy it :)

Thanks again~

[qiuyanghui]

Thank you, @elf-mouse @mormarijn