feat(text-field): add pattern

PiperOrigin-RevId: 470069611
material-components · Aug 25, 2022 · 810a9a4 · 810a9a4
1 parent c73b59c
commit 810a9a4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -171,6 +171,13 @@ export abstract class TextField extends LitElement {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
   @property({type: Number}) minLength = -1;
+  /**
+   * A regular expression that the text field's value must match to pass
+   * constraint validation.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
+  @property({type: String}) pattern = '';
   @property({type: String, reflect: true, converter: stringConverter})
   placeholder = '';
   @property({type: Boolean, reflect: true}) readonly = false;
@@ -517,6 +524,7 @@ export abstract class TextField extends LitElement {
     const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined;
     const minValue = this.min || undefined;
     const minLengthValue = this.minLength > -1 ? this.minLength : undefined;
+    const patternValue = this.pattern || undefined;
     const roleValue = this.role || undefined;
     const stepValue = this.step || undefined;
 
@@ -537,6 +545,7 @@ export abstract class TextField extends LitElement {
       maxlength=${ifDefined(maxLengthValue)}
       min=${ifDefined(minValue as unknown as number)}
       minlength=${ifDefined(minLengthValue)}
+      pattern=${ifDefined(patternValue)}
       placeholder=${ifDefined(placeholderValue)}
       role=${ifDefined(roleValue)}
       ?readonly=${this.readonly}

diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts
@@ -445,6 +445,35 @@ describe('TextField', () => {
             .toBeFalse();
       });
     });
+
+    describe('pattern', () => {
+      it('should set attribute on input', async () => {
+        const {testElement, input} = await setupTest();
+        testElement.pattern = 'foo';
+        await env.waitForStability();
+
+        expect(input.getAttribute('pattern'))
+            .withContext('pattern')
+            .toEqual('foo');
+      });
+
+      it('should not set attribute if value is empty', async () => {
+        const {testElement, input} = await setupTest();
+        testElement.pattern = 'foo';
+        await env.waitForStability();
+
+        expect(input.hasAttribute('pattern'))
+            .withContext('should have pattern')
+            .toBeTrue();
+
+        testElement.pattern = '';
+        await env.waitForStability();
+
+        expect(input.hasAttribute('pattern'))
+            .withContext('should not have pattern')
+            .toBeFalse();
+      });
+    });
   });
 
   describe('stepUp()', () => {