From f8f9d36bfd8fddf84d471e10a89cafa82b7d1f6d Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Sat, 24 Aug 2024 19:47:08 +0200
Subject: [PATCH] Remove tab focus while closed

---
 package.json                 |  2 +-
 src/client/RemixDevTools.tsx | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 44b082d..c400e85 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
   "author": "Alem Tuzlak",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "license": "MIT",
   "keywords": [
     "remix",
diff --git a/src/client/RemixDevTools.tsx b/src/client/RemixDevTools.tsx
index cad21db..c6ab65d 100644
--- a/src/client/RemixDevTools.tsx
+++ b/src/client/RemixDevTools.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RDTContextProvider, RdtClientConfig } from "./context/RDTContext.js";
 import { Tab } from "./tabs/index.js";
 import { useTimelineHandler } from "./hooks/useTimelineHandler.js";
@@ -27,6 +27,17 @@ import { useListenToRouteChange } from "./hooks/detached/useListenToRouteChange.
 import { RdtPlugin } from "../index.js"; 
 import { useHotkeys } from "react-hotkeys-hook";
 
+const recursivelyChangeTabIndex = (node: Element | HTMLElement, remove = true) => {
+  if(remove){
+    node.setAttribute("tabIndex","-1");
+  } else { 
+    node.removeAttribute("tabIndex");
+  }
+  for(const child of node.children) { 
+    recursivelyChangeTabIndex(child, remove);
+  } 
+};
+
 const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useTimelineHandler();
   useResetDetachmentCheck();
@@ -50,7 +61,11 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useHotkeys(settings.openHotkey, () => debounceSetOpen());
   useHotkeys("esc", () =>  isOpen ? debounceSetOpen() : null);
 
-  
+  useEffect(() => {
+    const el = document.getElementById(REMIX_DEV_TOOLS);
+    if(!el) return;
+    recursivelyChangeTabIndex(el , !isOpen); 
+  },[isOpen])  
 
   if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   // If the dev tools are detached, we don't want to render the main panel