Fix issue with toggles blocking dialog and dialog launching on mobile (#7506)

* Fix issue with some inputs blocking, or incorrectly allowing, keyboard shortcut activation

* Explicitly declare all input types that we can allow alphanumeric overrides

* Do not launch dialog in codemirror targets on mobile devices

src/components/ha-code-editor.ts

@@ -81,6 +81,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
+    this._blockKeyboardShortcuts();
     this._load();
   }
 
@@ -232,6 +233,10 @@ export class HaCodeEditor extends UpdatingElement {
     this.codemirror!.on("changes", () => this._onChange());
   }
 
+  private _blockKeyboardShortcuts() {
+    this.addEventListener("keydown", (ev) => ev.stopPropagation());
+  }
+
   private _onChange(): void {
     const newValue = this.value;
     if (newValue === this._value) {

src/state/quick-bar-mixin.ts

@@ -36,20 +36,41 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _showQuickBar(e: KeyboardEvent, commandMode = false) {
-      if (
-        !this.hass?.user?.is_admin ||
-        !this.hass.enableShortcuts ||
-        this._inInputField(e)
-      ) {
+      if (!this._canShowQuickBar(e)) {
         return;
       }
 
       showQuickBar(this, { commandMode });
     }
 
-    private _inInputField(e: KeyboardEvent) {
-      return ["INPUT", "TEXTAREA"].includes(
-        (e.composedPath()[0] as HTMLElement).tagName
+    private _canShowQuickBar(e: KeyboardEvent) {
+      return (
+        this.hass?.user?.is_admin &&
+        this.hass.enableShortcuts &&
+        this._canOverrideAlphanumericInput(e)
       );
     }
+
+    private _canOverrideAlphanumericInput(e: KeyboardEvent) {
+      const el = e.composedPath()[0] as any;
+
+      if (el.tagName === "TEXTAREA") {
+        return false;
+      }
+
+      if (el.tagName !== "INPUT") {
+        return true;
+      }
+
+      switch (el.type) {
+        case "button":
+        case "checkbox":
+        case "hidden":
+        case "radio":
+        case "range":
+          return true;
+        default:
+          return false;
+      }
+    }
   };