Add name attribute to autocomplete fields (#14258)

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}

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.

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)}

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}

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,

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"
                   )}

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"

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",
       },
     },
   },

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"
               )}