From 98baf0507b282eb046c0157bd3bd323069a89ec3 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Aug 2023 09:28:23 -0700
Subject: [PATCH] Fix location of quicklaunch, some focus issues

---
 src/components/quicklaunch.jsx | 15 ++++++++++++---
 src/pages/index.jsx            | 21 +++++++++++----------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/quicklaunch.jsx b/src/components/quicklaunch.jsx
index c371ccf68..0304f038e 100644
--- a/src/components/quicklaunch.jsx
+++ b/src/components/quicklaunch.jsx
@@ -61,7 +61,6 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
     }
   }
 
-
   function handleItemHover(event) {
     setCurrentItemIndex(parseInt(event.target?.dataset?.index, 10));
   }
@@ -71,6 +70,16 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
     openCurrentItem(event.metaKey);
   }
 
+  function handleItemKeyDown(event) {
+    if (!isOpen) return;
+
+    // native button handles other keys
+    if (event.key === "Escape") {
+      closeAndReset();
+      event.preventDefault();
+    }
+  }
+
   useEffect(() => {
     if (searchString.length === 0) setResults([]);
     else {
@@ -162,10 +171,10 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
             {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2">
               {results.map((r, i) => (
                 <li key={r.container ?? r.app ?? `${r.name}-${r.href}`}>
-                  <button type="button" data-index={i} onMouseEnter={handleItemHover} className={classNames(
+                  <button type="button" data-index={i} onMouseEnter={handleItemHover} onClick={handleItemClick} onKeyDown={handleItemKeyDown} className={classNames(
                     "flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
                     i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
-                    )} onClick={handleItemClick}>
+                    )}>
                     <div className="flex flex-row items-center mr-4 pointer-events-none">
                       {(r.icon || r.abbr) && <div className="w-5 text-xs mr-4">
                         {r.icon && <ResolvedIcon icon={r.icon} />}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 9b9890e91..3437811ca 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -213,8 +213,8 @@ function Home({ initialSettings }) {
 
   useEffect(() => {
     function handleKeyDown(e) {
-      if (e.target.tagName === "BODY") {
-        if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+      if (e.target.tagName === "BODY" || e.target.id === "inner_wrapper") {
+        if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.code === "Tab")) {
           setSearching(true);
         } else if (e.key === "Escape") {
           setSearchString("");
@@ -255,6 +255,14 @@ function Home({ initialSettings }) {
         <meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
       </Head>
       <div className="relative container m-auto flex flex-col justify-start z-10 h-full">
+        <QuickLaunch
+          servicesAndBookmarks={servicesAndBookmarks}
+          searchString={searchString}
+          setSearchString={setSearchString}
+          isOpen={searching}
+          close={setSearching}
+          searchProvider={settings.quicklaunch?.hideInternetSearch ? null : searchProvider}
+        />
         <div
           className={classNames(
             "flex flex-row flex-wrap justify-between",
@@ -262,14 +270,6 @@ function Home({ initialSettings }) {
             initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
           )}
         >
-          <QuickLaunch
-            servicesAndBookmarks={servicesAndBookmarks}
-            searchString={searchString}
-            setSearchString={setSearchString}
-            isOpen={searching}
-            close={setSearching}
-            searchProvider={settings.quicklaunch?.hideInternetSearch ? null : searchProvider}
-          />
           {widgets && (
             <>
               {widgets
@@ -375,6 +375,7 @@ export default function Wrapper({ initialSettings, fallback }) {
       >
         <div
         id="inner_wrapper"
+        tabindex="-1"
         className={classNames(
           'fixed overflow-auto w-full h-full',
           backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`,