diff --git a/package.json b/package.json index 82ba1c1336..483b6ea952 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "roboto-fontface": "^0.10.0", "sortablejs": "^1.10.2", "superstruct": "^0.10.12", + "tinykeys": "^1.1.1", "unfetch": "^4.1.0", "vue": "^2.6.11", "vue2-daterange-picker": "^0.5.1", diff --git a/src/state/quick-bar-mixin.ts b/src/state/quick-bar-mixin.ts index c7a8844285..3940ffe831 100644 --- a/src/state/quick-bar-mixin.ts +++ b/src/state/quick-bar-mixin.ts @@ -1,3 +1,4 @@ +import tinykeys from "tinykeys"; import type { Constructor, PropertyValues } from "lit-element"; import { HassElement } from "./hass-element"; import { @@ -14,8 +15,6 @@ declare global { } } -const isMacOS = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); - export default >(superClass: T) => class extends superClass { protected firstUpdated(changedProps: PropertyValues) { @@ -30,23 +29,27 @@ export default >(superClass: T) => } private _registerShortcut() { - document.addEventListener("keydown", (e: KeyboardEvent) => { - if (!this.hass?.user?.is_admin || !this.hass.enableShortcuts) { - return; - } - if (this.isOSCtrlKey(e) && e.code === "KeyP") { - e.preventDefault(); - const eventParams: QuickBarParams = {}; - if (e.shiftKey) { - eventParams.commandMode = true; - } - - showQuickBar(this, eventParams); - } + tinykeys(window, { + e: (ev) => this._showQuickBar(ev), + c: (ev) => this._showQuickBar(ev, true), }); } - private isOSCtrlKey(e: KeyboardEvent) { - return isMacOS ? e.metaKey : e.ctrlKey; + private _showQuickBar(e: KeyboardEvent, commandMode = false) { + if ( + !this.hass?.user?.is_admin || + !this.hass.enableShortcuts || + this._inInputField(e) + ) { + return; + } + + showQuickBar(this, { commandMode }); + } + + private _inInputField(e: KeyboardEvent) { + return ["INPUT", "TEXTAREA"].includes( + (e.composedPath()[0] as HTMLElement).tagName + ); } }; diff --git a/yarn.lock b/yarn.lock index e1439d610c..7133eda793 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12230,6 +12230,11 @@ tinycolor2@^1.4.1: resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g= +tinykeys@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.1.1.tgz#2535e8b24c8e2be447dd0ee1cff656ef435cd63d" + integrity sha512-YEA1TGMlkMabXI0NGddRFti+c1eMO2QP7wefwibSz0Pip8sA+d99yX5Pp7pK7wUeTKmrF4ys4XZVz44YydlTYg== + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"