fix keypress in code editor causing flow to submit (#16623)

src/components/ha-code-editor.ts

@@ -11,6 +11,7 @@ import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
 import { HomeAssistant } from "../types";
 import "./ha-icon";
@@ -82,6 +83,7 @@ export class HaCodeEditor extends ReactiveElement {
 
   public connectedCallback() {
     super.connectedCallback();
+    this.addEventListener("keydown", stopPropagation);
     if (!this.codemirror) {
       return;
     }
@@ -90,6 +92,11 @@ export class HaCodeEditor extends ReactiveElement {
     }
   }
 
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", stopPropagation);
+  }
+
   protected update(changedProps: PropertyValues): void {
     super.update(changedProps);
 
@@ -127,7 +134,6 @@ export class HaCodeEditor extends ReactiveElement {
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
-    this._blockKeyboardShortcuts();
     this._load();
   }
 
@@ -271,10 +277,6 @@ export class HaCodeEditor extends ReactiveElement {
     };
   }
 
-  private _blockKeyboardShortcuts() {
-    this.addEventListener("keydown", (ev) => ev.stopPropagation());
-  }
-
   private _onUpdate(update: ViewUpdate): void {
     if (!update.docChanged) {
       return;

src/dialogs/config-flow/step-flow-form.ts

@@ -36,6 +36,11 @@ class StepFlowForm extends LitElement {
 
   @state() private _errorMsg?: string;
 
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+
   protected render(): TemplateResult {
     const step = this.step;
     const stepData = this._stepDataProcessed;
@@ -84,13 +89,15 @@ class StepFlowForm extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     setTimeout(() => this.shadowRoot!.querySelector("ha-form")!.focus(), 0);
-    this.addEventListener("keypress", (ev) => {
-      if (ev.keyCode === 13) {
-        this._submitStep();
-      }
-    });
+    this.addEventListener("keydown", this._handleKeyDown);
   }
 
+  private _handleKeyDown = (ev: KeyboardEvent) => {
+    if (ev.keyCode === 13) {
+      this._submitStep();
+    }
+  };
+
   private get _stepDataProcessed() {
     if (this._stepData !== undefined) {
       return this._stepData;