fix(textfield): reimplement min/maxlength

adobe · Jan 21, 2021 · 23a4c2e · 23a4c2e
1 parent f188c68
commit 23a4c2e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
@@ -19,3 +19,4 @@ export { repeat } from 'lit-html/directives/repeat.js';
 export { classMap } from 'lit-html/directives/class-map.js';
 export { styleMap } from 'lit-html/directives/style-map.js';
 export { until } from 'lit-html/directives/until.js';
+export { live } from 'lit-html/directives/live.js';
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -19,6 +19,7 @@ import {
     PropertyValues,
     nothing,
     ifDefined,
+    live,
 } from '@spectrum-web-components/base';
 
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -155,6 +156,8 @@ export class Textfield extends Focusable {
             <textarea
                 aria-label=${this.label || this.placeholder}
                 id="input"
+                maxlength=${ifDefined(this.maxlength)}
+                minlength=${this.minlength}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${this.value}
@@ -173,11 +176,14 @@ export class Textfield extends Focusable {
         return html`
             <!-- @ts-ignore -->
             <input
+                type="text"
                 aria-label=${this.label || this.placeholder}
                 id="input"
+                maxlength=${this.maxlength}
+                minlength=${this.minlength}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
-                .value=${this.value}
+                .value=${live(this.value)}
                 @change=${this.onChange}
                 @input=${this.onInput}
                 @focus=${this.onFocus}
@@ -212,6 +218,9 @@ export class Textfield extends Focusable {
                 const regex = new RegExp(this.pattern);
                 validity = regex.test(this.value);
             }
+            if (typeof this.minlength !== 'undefined') {
+                validity = validity && this.value.length > this.minlength;
+            }
             this.valid = validity;
             this.invalid = !validity;
         }

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 import '../sp-textfield.js';
 import { Textfield } from '../';
 import { litFixture, html, elementUpdated, expect } from '@open-wc/testing';
+import { executeServerCommand } from '@web/test-runner-commands';
 
 describe('Textfield', () => {
     it('loads default textfield accessibly', async () => {
@@ -136,7 +137,6 @@ describe('Textfield', () => {
             : null;
         expect(input).to.not.be.null;
     });
-
     it('valid - multiline', async () => {
         const el = await litFixture<Textfield>(
             html`
@@ -241,6 +241,62 @@ describe('Textfield', () => {
 
         expect(el.value).to.equal(testValue);
     });
+    it('accepts maxlength', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    placeholder="Enter your name"
+                    maxlength="3"
+                    minlength="2"
+                    required
+                ></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+        el.focus();
+
+        await executeServerCommand('send-keys', {
+            type: 'a',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('a');
+        expect(el.checkValidity()).to.be.false;
+
+        await executeServerCommand('send-keys', {
+            type: 'b',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('ab');
+        expect(el.checkValidity());
+
+        await executeServerCommand('send-keys', {
+            type: 'c',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('abc');
+        expect(el.checkValidity());
+
+        await executeServerCommand('send-keys', {
+            type: 'd',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('abc');
+        expect(el.checkValidity());
+
+        await executeServerCommand('send-keys', {
+            press: 'Backspace',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('ab');
+        expect(el.checkValidity());
+
+        await executeServerCommand('send-keys', {
+            press: 'Backspace',
+        });
+        await elementUpdated(el);
+        expect(el.value).to.equal('a');
+        expect(el.checkValidity()).to.be.false;
+    });
     it('dispatches a `change` event', async () => {
         const testValue = 'Test Name';
         let eventSource = null as Textfield | null;