feat(text-field): add minLength and maxLength

PiperOrigin-RevId: 468759213
material-components · Aug 19, 2022 · 0c8a91f · 0c8a91f
1 parent c7abd25
commit 0c8a91f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -120,6 +120,20 @@ export abstract class TextField extends LitElement {
   }
 
   // <input> 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`<input
       class="md3-text-field__input"
@@ -430,6 +446,8 @@ export abstract class TextField extends LitElement {
       aria-label=${ifDefined(ariaLabelValue)}
       aria-labelledby=${ifDefined(ariaLabelledByValue)}
       ?disabled=${this.disabled}
+      maxlength=${ifDefined(maxLengthValue)}
+      minlength=${ifDefined(minLengthValue)}
       placeholder=${ifDefined(placeholderValue)}
       ?readonly=${this.readonly}
       ?required=${this.required}

diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts
@@ -355,6 +355,47 @@ describe('TextField', () => {
         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.