fix(textfield): update validation path, add "allowed-keys"

adobe · Mar 25, 2020 · ae9f85d · ae9f85d
1 parent 00f6cb0
commit ae9f85d
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 26 deletions.
diff --git a/packages/textfield/src/textfield.ts b/packages/textfield/src/textfield.ts
@@ -43,6 +43,9 @@ export class Textfield extends Focusable {
         ];
     }
 
+    @property({ attribute: 'allowed-keys' })
+    allowedKeys = '';
+
     @query('#input')
     private inputElement!: HTMLInputElement | HTMLTextAreaElement;
 
@@ -86,6 +89,20 @@ export class Textfield extends Focusable {
     }
 
     protected onInput(): void {
+        if (this.allowedKeys && this.inputElement.value) {
+            const regExp = new RegExp(`^[${this.allowedKeys}]*$`);
+            if (!regExp.test(this.inputElement.value)) {
+                const selectionStart = this.inputElement
+                    .selectionStart as number;
+                const nextSelectStart = selectionStart - 1;
+                this.inputElement.value = this.value;
+                this.inputElement.setSelectionRange(
+                    nextSelectStart,
+                    nextSelectStart
+                );
+                return;
+            }
+        }
         this.value = this.inputElement.value;
     }
 
@@ -164,13 +181,16 @@ export class Textfield extends Focusable {
     }
 
     protected updated(changedProperties: PropertyValues): void {
-        if (changedProperties.has('value')) {
+        if (
+            changedProperties.has('value') ||
+            (changedProperties.has('required') && this.required)
+        ) {
             this.checkValidity();
         }
     }
 
     public checkValidity(): boolean {
-        if (this.value && (this.pattern || this.required)) {
+        if (this.required || (this.value && this.pattern)) {
             let validity = this.inputElement.checkValidity();
             if ((this.disabled || this.multiline) && this.pattern) {
                 const regex = new RegExp(this.pattern);

diff --git a/packages/textfield/stories/textfield.stories.ts b/packages/textfield/stories/textfield.stories.ts
@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 import {
     html,
-    boolean,
     withKnobs,
     withWebComponentsKnobs,
 } from '@open-wc/demoing-storybook';
@@ -26,49 +25,51 @@ export default {
 };
 
 export const Default = (): TemplateResult => {
-    const quiet = boolean('Quiet', false, 'Element');
     return html`
+        <sp-textfield placeholder="Enter your name"></sp-textfield>
+        <sp-textfield placeholder="Enter your name" disabled></sp-textfield>
         <sp-textfield
             placeholder="Enter your name"
-            ?quiet=${quiet}
-        ></sp-textfield>
-        <sp-textfield
-            placeholder="Enter your name"
-            disabled
-            ?quiet=${quiet}
-        ></sp-textfield>
-        <sp-textfield
-            placeholder="Enter your name"
-            pattern="[\\w\\s]+"
+            pattern="[\\w\\s]*"
             required
-            valid
             value="A valid input"
-            ?quiet=${quiet}
         ></sp-textfield>
         <sp-textfield
             placeholder="Enter your name"
-            pattern="[\\w\\s]+"
+            pattern="[\\w\\s]*"
             required
-            valid
             value="A valid input"
             disabled
-            ?quiet=${quiet}
         ></sp-textfield>
         <sp-textfield
             placeholder="Enter your name"
-            pattern="[\\d]+"
-            required
+            pattern="[\\d]*"
             value="Not a valid input"
-            ?quiet=${quiet}
         ></sp-textfield>
         <sp-textfield
             placeholder="Enter your name"
-            pattern="[\\d]+"
-            invalid
+            pattern="^[\\d]$"
             required
             value="Not a valid input"
             disabled
-            ?quiet=${quiet}
+        ></sp-textfield>
+    `;
+};
+
+export const notRequiredWithPattern = (): TemplateResult => {
+    return html`
+        <sp-textfield
+            placeholder="Enter z, x, c, or v"
+            pattern="[zxcv]+"
+        ></sp-textfield>
+    `;
+};
+
+export const allowedKeys = (): TemplateResult => {
+    return html`
+        <sp-textfield
+            placeholder="Enter your name"
+            allowed-keys="a-z"
         ></sp-textfield>
     `;
 };
diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
@@ -200,7 +200,6 @@ describe('Textfield', () => {
         const testSource = eventSource as Textfield;
         expect(testSource.isSameNode(el)).to.be.true;
     });
-
     it('passes through `autocomplete` attribute', async () => {
         let el = await litFixture<Textfield>(
             html`
@@ -226,4 +225,52 @@ describe('Textfield', () => {
             expect(input.getAttribute('autocomplete')).to.not.exist;
         }
     });
+    it('tests on `required` changes', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield value=""></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+        expect(el.invalid).to.be.false;
+
+        el.required = true;
+        await elementUpdated(el);
+        expect(el.invalid).to.be.true;
+    });
+    it('manages `allowed-keys`', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield allowed-keys="asdf"></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+        expect(el.value).to.equal('');
+
+        const inputElement = (el.shadowRoot
+            ? el.shadowRoot.querySelector('#input')
+            : el.querySelector('#input')) as HTMLInputElement;
+
+        inputElement.value = 'asdf';
+        inputElement.dispatchEvent(new InputEvent('input'));
+
+        await elementUpdated(el);
+        expect(el.value).to.equal('asdf');
+
+        inputElement.value = `asdff`;
+        inputElement.setSelectionRange(1, 1);
+        inputElement.dispatchEvent(new InputEvent('input'));
+
+        await elementUpdated(el);
+        expect(el.value).to.equal('asdff');
+        expect(inputElement.selectionStart).to.equal(1);
+
+        inputElement.value = `asdoff`;
+        inputElement.setSelectionRange(4, 4);
+        inputElement.dispatchEvent(new InputEvent('input'));
+
+        await elementUpdated(el);
+        expect(el.value).to.equal('asdff');
+        expect(inputElement.selectionStart).to.equal(3);
+    });
 });