From 43fbf97e10dce9a2c4daf209fb46dd07914d5618 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 29 Jun 2020 23:52:04 +0200
Subject: [PATCH] Restore focus when returning to tab (#6276)

---
 src/common/dom/deep-active-element.ts |  8 ++++++++
 src/layouts/partial-panel-resolver.ts | 17 +++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/common/dom/deep-active-element.ts

diff --git a/src/common/dom/deep-active-element.ts b/src/common/dom/deep-active-element.ts
new file mode 100644
index 0000000000..e348032ed1
--- /dev/null
+++ b/src/common/dom/deep-active-element.ts
@@ -0,0 +1,8 @@
+export const deepActiveElement = (
+  root: DocumentOrShadowRoot = document
+): Element | null => {
+  if (root.activeElement?.shadowRoot?.activeElement) {
+    return deepActiveElement(root.activeElement.shadowRoot);
+  }
+  return root.activeElement;
+};
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index a3cb084c36..166f3b7a91 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -14,6 +14,7 @@ import {
   STATE_RUNNING,
 } from "home-assistant-js-websocket";
 import { CustomPanelInfo } from "../data/panel_custom";
+import { deepActiveElement } from "../common/dom/deep-active-element";
 
 const CACHE_URL_PATHS = ["lovelace", "developer-tools"];
 const COMPONENTS = {
@@ -92,7 +93,9 @@ class PartialPanelResolver extends HassRouterPage {
 
   private _waitForStart = false;
 
-  private _disconnectedPanel?: ChildNode;
+  private _disconnectedPanel?: HTMLElement;
+
+  private _disconnectedActiveElement?: HTMLElement;
 
   private _hiddenTimeout?: number;
 
@@ -185,7 +188,13 @@ class PartialPanelResolver extends HassRouterPage {
           !(curPanel.config as CustomPanelInfo).config._panel_custom
             .embed_iframe)
       ) {
-        this._disconnectedPanel = this.lastChild;
+        this._disconnectedPanel = this.lastChild as HTMLElement;
+        const activeEl = deepActiveElement(
+          this._disconnectedPanel.shadowRoot || undefined
+        );
+        if (activeEl instanceof HTMLElement) {
+          this._disconnectedActiveElement = activeEl;
+        }
         this.removeChild(this.lastChild);
       }
     }, 300000);
@@ -201,6 +210,10 @@ class PartialPanelResolver extends HassRouterPage {
       this.appendChild(this._disconnectedPanel);
       this._disconnectedPanel = undefined;
     }
+    if (this._disconnectedActiveElement) {
+      this._disconnectedActiveElement.focus();
+      this._disconnectedActiveElement = undefined;
+    }
   }
 
   private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) {