From 98a32041d45266e336907f2df593b59d12e50c67 Mon Sep 17 00:00:00 2001
From: Steve Repsher <steverep@users.noreply.github.com>
Date: Wed, 2 Nov 2022 13:22:02 -0400
Subject: [PATCH] Add name attribute to autocomplete fields (#14258)

---
 src/auth/ha-password-manager-polyfill.ts                | 1 +
 src/components/ha-form/ha-form-string.ts                | 1 +
 src/components/ha-form/ha-form.ts                       | 1 +
 src/components/ha-selector/ha-selector-text.ts          | 4 ++++
 src/components/ha-selector/ha-selector.ts               | 3 +++
 src/panels/config/cloud/login/cloud-login.ts            | 2 ++
 src/panels/config/cloud/register/cloud-register.ts      | 2 ++
 src/panels/config/users/dialog-admin-change-password.ts | 4 ++--
 src/panels/profile/ha-change-password-card.ts           | 1 +
 9 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/auth/ha-password-manager-polyfill.ts b/src/auth/ha-password-manager-polyfill.ts
index 2adb35c0e0..94f8351636 100644
--- a/src/auth/ha-password-manager-polyfill.ts
+++ b/src/auth/ha-password-manager-polyfill.ts
@@ -92,6 +92,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
       <input
         tabindex="-1"
         .id=${schema.name}
+        .name=${schema.name}
         .type=${inputType}
         .value=${this.stepData[schema.name] || ""}
         .autocomplete=${schema.autocomplete}
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index edc0a48754..032bab1e12 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -60,6 +60,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
+        .name=${this.schema.name}
         .autocomplete=${this.schema.autocomplete}
         .suffix=${isPassword
           ? // reserve some space for the icon.
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 8148b30d26..140db7a27f 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -81,6 +81,7 @@ export class HaForm extends LitElement implements HaFormElement {
               ? html`<ha-selector
                   .schema=${item}
                   .hass=${this.hass}
+                  .name=${item.name}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}
                   .label=${this._computeLabel(item, this.data)}
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index a9d3de47d4..afaa3a1c0e 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -14,6 +14,8 @@ export class HaTextSelector extends LitElement {
 
   @property() public value?: any;
 
+  @property() public name?: string;
+
   @property() public label?: string;
 
   @property() public placeholder?: string;
@@ -31,6 +33,7 @@ export class HaTextSelector extends LitElement {
   protected render() {
     if (this.selector.text?.multiline) {
       return html`<ha-textarea
+        .name=${this.name}
         .label=${this.label}
         .placeholder=${this.placeholder}
         .value=${this.value || ""}
@@ -46,6 +49,7 @@ export class HaTextSelector extends LitElement {
       ></ha-textarea>`;
     }
     return html`<ha-textfield
+        .name=${this.name}
         .value=${this.value || ""}
         .placeholder=${this.placeholder || ""}
         .helper=${this.helper}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 09125e10a7..4f6ab51f0f 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -40,6 +40,8 @@ const LOAD_ELEMENTS = {
 export class HaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
+  @property() public name?: string;
+
   @property() public selector!: Selector;
 
   @property() public value?: any;
@@ -74,6 +76,7 @@ export class HaSelector extends LitElement {
     return html`
       ${dynamicElement(`ha-selector-${this._type}`, {
         hass: this.hass,
+        name: this.name,
         selector: this.selector,
         value: this.value,
         label: this.label,
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
index c2e56e635a..36dcf84d39 100644
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -113,6 +113,7 @@ export class CloudLogin extends LitElement {
                     "ui.panel.config.cloud.login.email"
                   )}
                   id="email"
+                  name="username"
                   type="email"
                   autocomplete="username"
                   required
@@ -125,6 +126,7 @@ export class CloudLogin extends LitElement {
                 ></ha-textfield>
                 <ha-textfield
                   id="password"
+                  name="password"
                   .label=${this.hass.localize(
                     "ui.panel.config.cloud.login.password"
                   )}
diff --git a/src/panels/config/cloud/register/cloud-register.ts b/src/panels/config/cloud/register/cloud-register.ts
index 319e557c99..790ddcca5a 100644
--- a/src/panels/config/cloud/register/cloud-register.ts
+++ b/src/panels/config/cloud/register/cloud-register.ts
@@ -132,6 +132,7 @@ export class CloudRegister extends LitElement {
                 <ha-textfield
                   autofocus
                   id="email"
+                  name="email"
                   .label=${this.hass.localize(
                     "ui.panel.config.cloud.register.email_address"
                   )}
@@ -146,6 +147,7 @@ export class CloudRegister extends LitElement {
                 ></ha-textfield>
                 <ha-textfield
                   id="password"
+                  name="password"
                   label="Password"
                   .value=${this._password}
                   type="password"
diff --git a/src/panels/config/users/dialog-admin-change-password.ts b/src/panels/config/users/dialog-admin-change-password.ts
index c695d56230..1e200f5f89 100644
--- a/src/panels/config/users/dialog-admin-change-password.ts
+++ b/src/panels/config/users/dialog-admin-change-password.ts
@@ -20,7 +20,7 @@ const SCHEMA = [
     selector: {
       text: {
         type: "password",
-        autofill: "new-password",
+        autocomplete: "new-password",
       },
     },
   },
@@ -30,7 +30,7 @@ const SCHEMA = [
     selector: {
       text: {
         type: "password",
-        autofill: "new-password",
+        autocomplete: "new-password",
       },
     },
   },
diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts
index a9ddfee225..fda74d6ef6 100644
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@@ -51,6 +51,7 @@ class HaChangePasswordCard extends LitElement {
 
             <ha-textfield
               id="currentPassword"
+              name="currentPassword"
               .label=${this.hass.localize(
                 "ui.panel.profile.change_password.current_password"
               )}