Do not close aliases dialog on enter (#14952)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-dialog.ts

@@ -3,10 +3,12 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import type { HomeAssistant } from "../types";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
+const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button"];
+
 export const createCloseHeading = (
   hass: HomeAssistant,
   title: string | TemplateResult
@@ -32,6 +34,14 @@ export class HaDialog extends DialogBase {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
+  protected firstUpdated(): void {
+    super.firstUpdated();
+    this.suppressDefaultPressSelector = [
+      this.suppressDefaultPressSelector,
+      SUPPRESS_DEFAULT_PRESS_SELECTOR,
+    ].join(", ");
+  }
+
   static override styles = [
     styles,
     css`

src/panels/config/entities/entity-aliases/dialog-entity-aliases.ts

@@ -72,16 +72,21 @@ class DialogEntityAliases extends LitElement {
                     dialogInitialFocus=${index}
                     .index=${index}
                     class="flex-auto"
-                    label="Alias"
+                    .label=${this.hass!.localize(
+                      "ui.dialogs.entity_registry.editor.aliases.input_label",
+                      { number: index + 1 }
+                    )}
                     .value=${alias}
                     ?data-last=${index === this._aliases.length - 1}
-                    @change=${this._editAlias}
+                    @input=${this._editAlias}
+                    @keydown=${this._keyDownAlias}
                   ></ha-textfield>
                   <ha-icon-button
                     .index=${index}
                     slot="navigationIcon"
                     label=${this.hass!.localize(
-                      "ui.dialogs.entity_registry.editor.aliases.remove_alias"
+                      "ui.dialogs.entity_registry.editor.aliases.remove_alias",
+                      { number: index + 1 }
                     )}
                     @click=${this._removeAlias}
                     .path=${mdiDeleteOutline}
@@ -133,6 +138,13 @@ class DialogEntityAliases extends LitElement {
     this._aliases[index] = (ev.target as any).value;
   }
 
+  private async _keyDownAlias(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      ev.stopPropagation();
+      this._addAlias();
+    }
+  }
+
   private async _removeAlias(ev: Event) {
     const index = (ev.target as any).index;
     const aliases = [...this._aliases];

src/panels/config/entities/entity-registry-basic-editor.ts

@@ -49,7 +49,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
 
   @state() private _submitting = false;
 
-  private _openAliasesSettings() {
+  private _handleAliasesClicked(ev: CustomEvent) {
+    if (ev.detail.index !== 0) return;
     showEntityAliasesDialog(this, {
       entity: this.entry!,
       updateEntry: async (updates) => {
@@ -272,12 +273,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
             "ui.dialogs.entity_registry.editor.aliases_section"
           )}
         </div>
-        <mwc-list class="aliases">
-          <mwc-list-item
-            .twoline=${this.entry.aliases.length > 0}
-            hasMeta
-            @click=${this._openAliasesSettings}
-          >
+        <mwc-list class="aliases" @action=${this._handleAliasesClicked}>
+          <mwc-list-item .twoline=${this.entry.aliases.length > 0} hasMeta>
             <span>
               ${this.entry.aliases.length > 0
                 ? this.hass.localize(

src/panels/config/entities/entity-registry-settings.ts

@@ -807,12 +807,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               "ui.dialogs.entity_registry.editor.aliases_section"
             )}
           </div>
-          <mwc-list class="aliases">
-            <mwc-list-item
-              .twoline=${this.entry.aliases.length > 0}
-              hasMeta
-              @click=${this._openAliasesSettings}
-            >
+          <mwc-list class="aliases" @action=${this._handleAliasesClicked}>
+            <mwc-list-item .twoline=${this.entry.aliases.length > 0} hasMeta>
               <span>
                 ${this.entry.aliases.length > 0
                   ? this.hass.localize(
@@ -1015,7 +1011,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _openAliasesSettings() {
+  private _handleAliasesClicked(ev: CustomEvent) {
+    if (ev.detail.index !== 0) return;
     showEntityAliasesDialog(this, {
       entity: this.entry!,
       updateEntry: async (updates) => {

src/translations/en.json

@@ -1003,7 +1003,8 @@
           "aliases": {
             "heading": "{name} aliases",
             "description": "Aliases are alternative names used in voice assistants to refer to this entity.",
-            "remove_alias": "Remove alias",
+            "remove_alias": "Remove alias {number}",
+            "input_label": "Alias {number}",
             "save": "Save",
             "add_alias": "Add alias",
             "no_aliases": "No aliases have been added yet",