Vaadin-combo-box: 無効な状態でスタック

代わりに、これはvaadin-text-fieldバグのようです。 vaadin-combo-boxは、 required invalidプロパティとvaadin-text-field同期するだけです。

コンポーネントを開発するとき、動的に変化するrequired状態（または他の検証制約）は考慮されていないと思います。

検証では、 required 、 pattern 、 maxlength 、およびminlength考慮されます。 これらのいずれかが設定されている場合、ネイティブ<input>のcheckValidity()の戻り値に基づいてinvalidブール値が設定されます。 これらのいずれも設定されていない場合でも、独自のロジックに基づいて手動でinvalidをtrueまたはfalseに設定でき、 vaadin-text-fieldは無効な状態をそのまま保持します設定されています。

問題は、これらの検証制約の1つ（ required ）のみが設定されていて、フィールドが検証されて無効になった後、制約を削除すると、 checkValidity()実行されないことです。ネイティブ入力のinvalid状態を維持します（手動で追加されたかのように）。 基本的に、アクティブな検証制約がない場合、テキストフィールドがinvalid状態を自動的に削除することはありません。

ここでの適切なロジックは、 required 、 pattern 、 maxlengthまたはminlength制約が削除されたときを観察することだと思います_and_ invalid == trueすでに、 this.invalid = this.inputElement.checkValidity();

これは、次のようにするだけでvaadin-text-fieldで再現できます。

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

1. チェックボックスをオンに切り替えます（テキストフィールドが必須になります）
2. テキストフィールドのフォーカスとフォーカス解除（まだ空であるため無効になります）
3. チェックボックスをオフに切り替えます（テキストフィールドは不要になります）
4. テキストフィールドに何かを書き込んでフォーカスを外します。テキストフィールドがまだ無効として表示されていることに注意してください。

これに関する問題をhttps://github.com/vaadin/vaadin-text-field/issues/400で開きましたが、他の誰かがコンボボックスの問題に気付いた場合に見やすくするために、このコンボボックスの問題はここに残しておきます。 上記のテキストフィールドの問題が修正されたら、これを閉じる必要があります。

この修正はvaadin-text-field v2.3.9およびv2.4.10でリリースされ

期待通りに動作していることを確認できました。 良い仕事をありがとう、@ Haprog！ 😄

ところで。 vaadin-text-field v2.3.9およびv2.4.10のWebJarは壊れているため、Java（Vaadin 10–13または互換モードのVaadin 14）からこれらを使用する必要がある場合は、少し待つ必要があります。 WebJarが機能するように、v2.3.10とv2.4.11をまもなくリリースする必要があります。