fix: setting title when textfield is invalid

adobe · Jul 28, 2023 · 36d0537 · 36d0537
1 parent 6be9a5f
commit 36d0537
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -249,6 +249,7 @@ export class TextfieldBase extends ManageHelpText(
                 minlength=${ifDefined(
                     this.minlength > -1 ? this.minlength : undefined
                 )}
+                title=${this.invalid ? '' : nothing}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${this.displayValue}
@@ -276,6 +277,7 @@ export class TextfieldBase extends ManageHelpText(
                 this.placeholder}
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 class="input"
+                title=${this.invalid ? '' : nothing}
                 maxlength=${ifDefined(
                     this.maxlength > -1 ? this.maxlength : undefined
                 )}

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
@@ -168,7 +168,9 @@ describe('Textfield', () => {
 
         const boundsDefaultElement = defaultTextarea?.getBoundingClientRect();
         const boundsOneRowElement = oneRowTextarea?.getBoundingClientRect();
-        expect(boundsDefaultElement?.height).to.be.greaterThan(boundsOneRowElement?.height ?? 0);
+        expect(boundsDefaultElement?.height).to.be.greaterThan(
+            boundsOneRowElement?.height ?? 0
+        );
     });
     it('multiline with rows does not resize', async () => {
         const el = await litFixture<Textfield>(
@@ -429,6 +431,41 @@ describe('Textfield', () => {
             : null;
         expect(input).to.not.be.null;
     });
+    it('valid - boundary-type assertions and title', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    placeholder="Enter your number"
+                    pattern="^[\\d]+$"
+                    value="123"
+                ></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+
+        expect(el).to.not.equal(undefined);
+        const input = el.shadowRoot.querySelector('#valid');
+        expect(input).to.not.be.null;
+        expect(el.focusElement).to.not.have.attribute('title');
+    });
+    it('valid - multiline - boundary-type assertions and title', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    multiline
+                    placeholder="Enter your number"
+                    pattern="^[\\d]+$"
+                    value="123"
+                ></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+
+        expect(el).to.not.equal(undefined);
+        const input = el.shadowRoot.querySelector('#valid');
+        expect(input).to.not.be.null;
+        expect(el.focusElement).to.not.have.attribute('title');
+    });
     it('valid - unicode', async () => {
         const el = await litFixture<Textfield>(
             html`
@@ -602,6 +639,43 @@ describe('Textfield', () => {
             : null;
         expect(input).to.not.be.null;
     });
+    it('invalid - boundary-type assertions and title', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    placeholder="Enter your number"
+                    type="url"
+                    value="invalid-email"
+                    invalid
+                ></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+
+        expect(el).to.not.equal(undefined);
+        const input = el.shadowRoot.querySelector('#invalid');
+        expect(input).to.not.be.null;
+        expect(el.focusElement).to.have.attribute('title');
+    });
+    it('invalid - multiline - boundary-type assertions and title', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    multiline
+                    placeholder="Enter your number"
+                    type="url"
+                    value="invalid-email"
+                    invalid
+                ></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+
+        expect(el).to.not.equal(undefined);
+        const input = el.shadowRoot.querySelector('#invalid');
+        expect(input).to.not.be.null;
+        expect(el.focusElement).to.have.attribute('title');
+    });
     it('invalid - multiline - boundary-type assertions', async () => {
         const el = await litFixture<Textfield>(
             html`