diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index 794c202740..f3660695b1 100644 --- a/src/components/ha-code-editor.ts +++ b/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; diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 2c262626a2..b855fc786b 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/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;