web-components icon indicating copy to clipboard operation
web-components copied to clipboard

`minlength` and `maxlength` are not validated when value is set programmatically

Open vursen opened this issue 2 years ago • 0 comments

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

  1. Add the snippet above to an HTML page
  2. 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

vursen avatar Aug 16 '22 12:08 vursen