Stuck in an invalid state

[joostdebruijn]

Description

When a vaadin-combo-box is required and the vaadin-combo-box has been selected, but nothing is chosen, the inner vaadin-text-field will be marked as invalid when deselecting the vaadin-combo-box. However, if the required attribute is removed in the meantime, the inner vaadin-text-field is still in the invalid-state.

Expected outcome

Changing attributes (or at least the required attribute) on the vaadin-combo-box should trigger a revalidation of the underlying vaadin-text-field.

Actual outcome

The vaadin-text-field is stuck in an invalid state. The form can't be submitted because of this invalid state.

Live Demo

https://ring-umbra.glitch.me

Steps to reproduce

1. Open the demo
2. Click in the vaadin-combo-box. The options will be display, but do not select an item (click somewhere in the white space)
3. Check the checkbox to make the field required.
4. Repeat step 2, the vaadin-combo-box will color red and is in an invalid state.
5. Uncheck the checkbox, the field is no longer required
6. Repeat step 2, the vaadin-combo-box will remain in an invalid state
7. Select something in the vaadin-combo-box
8. Use the clear button to empty the vaadin-combo-box: the vaadin-combo-box is still in an invalid state, although it is no longer required.

Changing the invalid attribute on the vaadin-combo-box doens't solve the problem as well, it looks like this value is not reflected in the inner vaadin-text-field.

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

I think the other browsers have the same issue, however I was not able to test them

[Haprog]

This seems to be a bug in vaadin-text-field instead. vaadin-combo-box just syncs the required and invalid properties with the internal vaadin-text-field.

I think dynamically changing required state (or other validation constraints) just hasn't been considered when developing the component.

The validation considers required, pattern, maxlength and minlength. If any of those are set, then it sets invalid boolean based on the return value of checkValidity() on the native <input>. If none of those are set you can still manually set invalid to true or false based on your own logic and vaadin-text-field keeps the invalid state as it has been set.

The problem seems to be that when you only have one of those validation constraints set (e.g. required) and the field has been validated and become invalid, and then you remove the constraint, it doesn't run checkValidity() on the native input anymore and it keeps the invalid state (as if it had been added manually). Basically the text field never automatically removes invalid state when there are no active validation constraints.

I think the proper logic here would be to observe when any of required, pattern, maxlength or minlength constraints is removed and invalid == true already, then set this.invalid = this.inputElement.checkValidity();

[Haprog]

This can be reproduced with vaadin-text-field just by having:

<vaadin-text-field required="{{tfRequired}}"></vaadin-text-field><br>
<label>Required <input type="checkbox" checked="{{tfRequired::change}}"></label>

1. toggle checkbox on (makes text field required)
2. focus and unfocus the text field (makes it invalid since it's still empty)
3. toggle checkbox off (makes text field not required)
4. write something in the text field and unfocus it, notice that text field is still shown as invalid

[Haprog]

I opened an issue about this here vaadin/vaadin-text-field#400 but I'll leave this combo box issue here for better visibility if someone else notices the issue with combo box. This should be closed after the above text field issue is fixed.

[Haprog]

This fix has been released in vaadin-text-field v2.3.9 and v2.4.10.

[joostdebruijn]

I can confirm it is working as expected now. Thanks voor the good work, @Haprog! 😄

[Haprog]

Btw. afaik the WebJars for vaadin-text-field v2.3.9 and v2.4.10 are broken, so if you need to use these from Java (Vaadin 10–13 or Vaadin 14 in compatibility mode) you need to wait a bit. We should release v2.3.10 and v2.4.11 soon with working WebJars.