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.
Changing attributes (or at least the required attribute) on the vaadin-combo-box
should trigger a revalidation of the underlying vaadin-text-field
.
The vaadin-text-field
is stuck in an invalid state. The form can't be submitted because of this invalid state.
vaadin-combo-box
. The options will be display, but do not select an item (click somewhere in the white space)vaadin-combo-box
will color red and is in an invalid state.vaadin-combo-box
will remain in an invalid statevaadin-combo-box
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
.
_I think the other browsers have the same issue, however I was not able to test them_
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();
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>
I opened an issue about this here https://github.com/vaadin/vaadin-text-field/issues/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.
I can confirm it is working as expected now. Thanks voor the good work, @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.