diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts index 0df98a3717..6770ab4382 100644 --- a/textfield/lib/text-field.ts +++ b/textfield/lib/text-field.ts @@ -120,6 +120,20 @@ export abstract class TextField extends LitElement { } // properties + /** + * The maximum number of characters a user can enter into the text field. Set + * to -1 for none. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength + */ + @property({type: Number}) maxLength = -1; + /** + * The minimum number of characters a user can enter into the text field. Set + * to -1 for none. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength + */ + @property({type: Number}) minLength = -1; @property({type: String, reflect: true, converter: stringConverter}) placeholder = ''; @property({type: Boolean, reflect: true}) readonly = false; @@ -422,6 +436,8 @@ export abstract class TextField extends LitElement { this.getSupportingText() ? this.supportingTextId : undefined; const ariaLabelValue = this.ariaLabel || this.label || undefined; const ariaLabelledByValue = this.ariaLabelledBy || undefined; + const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined; + const minLengthValue = this.minLength > -1 ? this.minLength : undefined; return html` { expect(input.setCustomValidity).toHaveBeenCalledWith(errorMessage); }); }); + + describe('minLength and maxLength', () => { + it('should set attribute on input', async () => { + const {testElement, input} = await setupTest(); + testElement.minLength = 2; + testElement.maxLength = 5; + await env.waitForStability(); + + expect(input.getAttribute('minLength')) + .withContext('minLength') + .toEqual('2'); + expect(input.getAttribute('maxLength')) + .withContext('maxLength') + .toEqual('5'); + }); + + it('should not set attribute if value is -1', async () => { + const {testElement, input} = await setupTest(); + testElement.minLength = 2; + testElement.maxLength = 5; + await env.waitForStability(); + + expect(input.hasAttribute('minlength')) + .withContext('should have minlength') + .toBeTrue(); + expect(input.hasAttribute('maxlength')) + .withContext('should have maxlength') + .toBeTrue(); + + testElement.minLength = -1; + testElement.maxLength = -1; + await env.waitForStability(); + + expect(input.hasAttribute('minlength')) + .withContext('should not have minlength') + .toBeFalse(); + expect(input.hasAttribute('maxlength')) + .withContext('should not have maxlength') + .toBeFalse(); + }); + }); }); // TODO(b/235238545): Add shared FormController tests.