Merge pull request #1881 from benphelps/fix/issue-1878

Fix location of quicklaunch, some focus issues

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} />}

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}`,