never close the sidebar when the mouse is over it (#1283)

* never close the sidebar when the mouse is over it

closes #1281

* prettier

* :focus-within also allows to tab to the results

* keep the backdrop while tabbing

* add missing "side bar is open" selectors

* simpler focus

Author: Fil

src/client/search-init.ts

@@ -10,22 +10,19 @@ input.addEventListener("focus", load, {once: true});
 input.addEventListener("keydown", load, {once: true});
 
 // Focus on meta-K and /
-const toggle = document.querySelector("#observablehq-sidebar-toggle")!;
+const toggle = document.querySelector<HTMLInputElement>("#observablehq-sidebar-toggle")!;
 addEventListener("keydown", (event) => {
   if (
     (event.code === "KeyK" && event.metaKey && !event.altKey && !event.ctrlKey) ||
     (event.key === "/" && !event.metaKey && !event.altKey && !event.ctrlKey && event.target === document.body)
   ) {
     // Force the sidebar to be temporarily open while the search input is
-    // focused. (We can’t use :focus-within because the sidebar isn’t focusable
-    // while it is invisible, and we don’t want to keep the sidebar open
-    // persistently after you blur the search input.)
-    toggle.classList.add("observablehq-sidebar-open");
-    input.focus();
+    // focused. We click on the toggle if necessary to make the input visible so
+    // it be focused. Then the :focus-within selector takes over and keeps it
+    // open until the user blurs the input.
+    if (toggle.checked) input.focus();
+    else toggle.click(), input.focus(), toggle.click();
     input.select();
     event.preventDefault();
   }
 });
-
-// Allow the sidebar to close when the search input is blurred.
-input.addEventListener("blur", () => toggle.classList.remove("observablehq-sidebar-open"));

src/style/layout.css

@@ -299,7 +299,7 @@
     left 150ms 0ms ease;
 }
 
-.observablehq-sidebar-open ~ #observablehq-sidebar,
+#observablehq-sidebar:focus-within,
 #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
   left: 0;
   visibility: initial;
@@ -319,12 +319,13 @@
   z-index: 2;
 }
 
-.observablehq-sidebar-open ~ #observablehq-sidebar-backdrop,
+#observablehq-sidebar-backdrop:has(~ #observablehq-sidebar:focus-within),
 #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop {
   display: initial;
 }
 
 @media (prefers-color-scheme: dark) {
+  #observablehq-sidebar:focus-within,
   #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
     box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
   }