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;