Add support for minlength to <calcite-text-area>

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The native <textarea> element supports both maxlength and minlength constraints. The <calcite-text-area> component currently supports a maxlength constraint but not a minlength one. The request is to add support for a minlength constraint.

Acceptance Criteria

• If provided, a minLength prop is passed through to the underlying <textarea> element as a minlength constraint.
• If/when the component supports a validity state (see Esri/calcite-design-system#7413), its validity.tooShort key is true while the component's value is shorter than minLength.
• The value's length is measured in UTF-16 code units.¹

Relevant Info

No response

Which Component

text-area

Example Use Case

Specifying a minlength constraint can be necessary when constructing a form from a feature layer's FormTemplate. Field elements associated with the TextAreaInput input may be rendered as <calcite-text-area> components. As a result, the input's minLength property should be able to be applied to the component as a minlength constraint.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength ↩

[Elijbet]

Due to our implementation and a browser limitation (see below), this is blocked by #8126.
 
The main blocker is that we use hidden inputs with forms, but the way we sync the values causes minlength/maxlength to get ignored in constraint validation APIs.

* The minlength and maxlength constraints are only checked on user-provided input. They are not checked if a value is set programmatically, even when explicitly calling checkValidity() or reportValidity().

from https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation

minlength/maxlength are always set on the hidden inputs programmatically because we have to pass the values to them from our components. And since the hidden inputs are the elements used for validation, they are not checked.