web-components
web-components copied to clipboard
`minlength` and `maxlength` are not validated when value is set programmatically
Description
Both minlength
and maxlength
don’t validate programmatically set values as follows from the HTML specification. This means that checkValidity()
of text-field
and text-area
may give a false positive result if any of the mentioned constraints are set and the value is set programmatically.
A finding from https://github.com/vaadin/web-components/issues/4196
Expected outcome
I would expect minlength
and maxlength
to be validated correctly regardless of the origin of the value: programmatic or user.
Minimal reproducible example
<script type="module">
import '@vaadin/text-field';
const textField = document.querySelector('vaadin-text-field');
textField.value = 'Test Value';
textField.validate();
</script>
<vaadin-text-field minlength="50"></vaadin-text-field>
Steps to reproduce
- Add the snippet above to an HTML page
- See that the field is not red = valid even though the value doesn't satisfy
minlength
.
Environment
Version: 23.2 OS: Mac OS
Browsers
Issue is not browser related