[Bug Report] Bottom border persist validation error color in IE

[nclemeur]

Environment

Vuetify Version: 2.2.6
Last working version: 1.5.20
Vue Version: 2.6.11
Browsers: Internet Explorer
OS: Windows 10

Steps to reproduce

Note: this is an Internet Explorer only problem! Codepen is provided for the code, but the issue can't be reproduced in codepen
Use switch to turn error to true, then turn error back to false using the switch.

Expected Behavior

Bottom border should go back to it's normal state

Actual Behavior

The bottom border will remain red

Reproduction Link

https://codepen.io/nclemeur/pen/dyPaEyO

[johnleider]

I ran into this the other day. It's a rendering issue (you can check and uncheck any display property in the dev tools and it fixes.

[nclemeur]

It should be noted that this can be easily reproduced in the v-text-field documentation (https://vuetifyjs.com/en/components/text-fields) in the validation example. Just type in a correct email in the e-mail field then move the focus away, the bottom border is red again.

[Mikilll94]

@nclemeur
In docs, everything works fine on IE. How is that possible? Even if you go to the forms section
https://vuetifyjs.com/en/components/forms#forms there are no problems with the red bottom border.

@johnleider
Do you know any workaround for this bug? I will be very glad for any help.

[kinkinkk]

@Mikilll94
Anyway, I

loading = true
sleep 50ms
loading = false

Check the improvement of the phenomenon.

The phenomenon was stopped by switching the loading.

[nclemeur]

@Mikilll94 yes that is really strange I can't reproduce it either. But I still see the issue on my side

@kinkinkk I am not sure I understand what do you mean? Could you elaborate a bit more?

[kinkinkk]

@nclemeur
It is a provisional correspondence method after reproducing.

You can fix the red border by turning loading on / off in the properties of the target v-textfiled.

[Mikilll94]

@kinkinkk
But how to detect that the field is now valid and we should refresh it? Does anyone have a fully working workaround?

[kinkinkk]

@Mikilll94
I'm currently working locally.
For example, a rule is set in the computed property, and only in the case of IE, loading switching is performed every time when inputting.

[nclemeur]

I believe this is now fixed with 2.2.9. Probably alon fixing #10388?

[Mikilll94]

I confirm that this is fixed in 2.2.9 👍

[MajesticPotatoe]

Will close given confirmation. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.