I've encountered a scenario where a DropDownList's red border (due to validation status) will be displayed or hidden when it shouldn't. It seems to be always one step behind. For example:
1. Submit the empty form to trigger validation. A validation message is displayed and the field shows a red border as expected.
2. Select a valid value. The validation message goes away as expected, but the red border remains.
3. Select an invalid value. The validation message appears, but now the red border disappears.
4. Select a valid value. The validation message goes away, but the red border remains.
Interestingly, this only happens when using the keyboard. Using the mouse, the border is displayed/hidden at the same time the validation message is displayed/hidden, as would normally be expected.
So to cause this: tab into the field, press one key (e.g., a letter or the down arrow) to select a value, then tab out of the field. If you change the value more than once, the red border will disappear the second time if it is also a valid value.
I've encountered almost the exact same scenario with other fields when using async validation rules (which Blazor currently does not support), leading me to believe the DropDownList control may be using async somewhere that's resulting in this problem.
Additionally, I'm only experiencing this when I'm wrapping the DropDownList control in my own custom component. I'm not sure why this is.
I've included a page and components that demonstrate this problem. It's a little messy but hopefully sheds some light on when it does and doesn't occur. It shows:
1. The issue happens to the TelerikDropDownList when wrapped in a custom component but not otherwise.
2. The issue does not happen to Microsoft's built-in InputSelect even if wrapped in a custom component.
3. The issue does not happen to TelerikTextBox even if wrapped in a custom component.
4. The values of CssClass and InputClass differ, indicating that validation only completes after the value has been changed and OnParametersSet() has been called. (async issue?)
In the attached demo page, the issue only occurs in the last field ("TelerikDropDownListWrapped").
Seems like this is a bug with TelerikDropDownList. If not a bug, how can I avoid this issue and why does it not occur with other controls?