feat: pass through autocomplete attribute to inputs

For text fields, allow the passing through of the `autocomplete` attribute
adobe · Jan 7, 2020 · 5416510 · 5416510
1 parent 0fa0b9a
commit 5416510
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/textfield/src/textfield.ts b/packages/textfield/src/textfield.ts
@@ -76,6 +76,11 @@ export class Textfield extends Focusable {
     @property({ type: Boolean, reflect: true })
     public required = false;
 
+    @property({ type: String, reflect: true })
+    public autocomplete?:
+        | HTMLInputElement['autocomplete']
+        | HTMLTextAreaElement['autocomplete'];
+
     public get focusElement(): HTMLInputElement | HTMLTextAreaElement {
         return this.inputElement;
     }
@@ -124,6 +129,7 @@ export class Textfield extends Focusable {
                           <div id="sizer">${this.value}</div>
                       `
                     : nothing}
+                <!-- @ts-ignore -->
                 <textarea
                     aria-label=${this.label || this.placeholder}
                     id="input"
@@ -134,11 +140,13 @@ export class Textfield extends Focusable {
                     @input=${this.onInput}
                     ?disabled=${this.disabled}
                     ?required=${this.required}
+                    autocomplete=${ifDefined(this.autocomplete)}
                 ></textarea>
                 ${this.renderStateIcons()}
             `;
         }
         return html`
+            <!-- @ts-ignore -->
             <input
                 aria-label=${this.label || this.placeholder}
                 id="input"
@@ -149,6 +157,7 @@ export class Textfield extends Focusable {
                 @input=${this.onInput}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
+                autocomplete=${ifDefined(this.autocomplete)}
             />
             ${this.renderStateIcons()}
         `;

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
@@ -200,4 +200,30 @@ 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`
+                <sp-textfield autocomplete="off"></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+        let input = el.shadowRoot ? el.shadowRoot.querySelector('input') : null;
+        expect(input).to.exist;
+        if (input) {
+            expect(input.getAttribute('autocomplete')).to.equal('off');
+        }
+
+        el = await litFixture<Textfield>(
+            html`
+                <sp-textfield></sp-textfield>
+            `
+        );
+        await elementUpdated(el);
+        input = el.shadowRoot ? el.shadowRoot.querySelector('input') : null;
+        expect(input).to.exist;
+        if (input) {
+            expect(input.getAttribute('autocomplete')).to.not.exist;
+        }
+    });
 });
diff --git a/packages/toast/src/toast.ts b/packages/toast/src/toast.ts
@@ -55,7 +55,6 @@ export class Toast extends LitElement {
     @property({ type: Number })
     public set timeout(timeout: number | null) {
         const hasTimeout = typeof timeout !== null && (timeout as number) > 0;
-        debugger;
         const newTimeout = hasTimeout
             ? Math.max(6000, timeout as number)
             : null;