Vaadin-combo-box: Preso em um estado inválido

Em vez disso, parece ser um bug em vaadin-text-field . vaadin-combo-box apenas sincroniza as propriedades required e invalid com as propriedades internas vaadin-text-field .

Acho que alterar dinamicamente o estado required (ou outras restrições de validação) simplesmente não foi considerado ao desenvolver o componente.

A validação considera required , pattern , maxlength e minlength . Se qualquer um deles for definido, ele define invalid booleano com base no valor de retorno de checkValidity() no nativo <input> . Se nenhum deles estiver definido, você ainda pode definir manualmente invalid para true ou false base em sua própria lógica e vaadin-text-field mantém o estado inválido como tem foi definido.

O problema parece ser que quando você tem apenas uma dessas restrições de validação definidas (por exemplo, required ) e o campo foi validado e se tornou inválido, e então você remove a restrição, ele não executa checkValidity() na entrada nativa mais e mantém o estado invalid (como se tivesse sido adicionado manualmente). Basicamente, o campo de texto nunca remove automaticamente o estado invalid quando não há restrições de validação ativas.

Acho que a lógica adequada aqui seria observar quando qualquer uma das required , pattern , maxlength ou minlength restrições são removidas _and_ invalid == true já, então defina this.invalid = this.inputElement.checkValidity();

Isso pode ser reproduzido com vaadin-text-field apenas por ter:

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

1. ativar a caixa de seleção (torna o campo de texto obrigatório)
2. focar e desfocar o campo de texto (torna-o inválido, pois ainda está vazio)
3. desative a caixa de seleção (torna o campo de texto não obrigatório)
4. escreva algo no campo de texto e desfoque-o, observe que o campo de texto ainda é mostrado como inválido

Abri um problema sobre isso aqui https://github.com/vaadin/vaadin-text-field/issues/400, mas deixarei esse problema de caixa de combinação aqui para melhor visibilidade se alguém perceber o problema com a caixa de combinação. Isso deve ser fechado depois que o problema do campo de texto acima for corrigido.

Esta correção foi lançada em vaadin-text-field v2.3.9 e v2.4.10 .

Posso confirmar que está funcionando conforme o esperado agora. Obrigado voor pelo bom trabalho, @Haprog! 😄

Por falar nisso. afaik os WebJars para vaadin-text-field v2.3.9 e v2.4.10 estão quebrados, então se você precisar usá-los do Java (Vaadin 10–13 ou Vaadin 14 em modo de compatibilidade), você precisa esperar um pouco. Devemos lançar v2.3.10 e v2.4.11 em breve com WebJars funcionais.