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 는 잘못된 상태를 그대로 유지합니다. 설정되었습니다.

문제는 검증 제약 조건 중 하나만 설정되어 있고(예: 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님, 수고하셨습니다! 😄

ㅋ afaik vaadin-text-field v2.3.9 및 v2.4.10에 대한 WebJar가 손상되었으므로 Java(호환 모드의 Vaadin 10–13 또는 Vaadin 14)에서 이를 사용해야 하는 경우 약간 기다려야 합니다. WebJar가 작동하는 v2.3.10 및 v2.4.11을 곧 출시해야 합니다.