enable lazy auto-complete search and fallback to input while loading (#…

…3813)

* fallback to input while lazy-loading search-autocomplete

* fix flex TS types

* remove testing profile leftover

* cache index

* cache index

* render basic search when in SSR

* drop client search index persistence

* prettier

* share more search input behaviors

* change no-results text to be more actionable

* update tests

* use input onChange directly

* woops

* only load auto-complete on focus

* increase autocomplete timeout

* increase autocomplete timeout

* (once again) increase autocomplete timeout

* (hopefully the last one where I) increase autocomplete test timeout

* change no-results copy

* upgrade search on hover

* only show search menu when there is an inputValue

* also preload keyboard highlighted items

* wait before starting preload

* only show indexing message after some time

* wrap SearchResults to prevent empty menu rendering

* clearer search results conditionals

* toggle menu when search item is selected

* Update client/src/search.tsx

Co-authored-by: Peter Bengtsson <peterbe@mozilla.com>

* prettier

* make no-results keyboard cursorable

* fix basic search widget styling issues

* fix comparison

* use location.href to navigate

That way previous searches are cleared

* await navigation in search tests

* keep navigate() and reset input instead

* peter testing to commit

* auto-activate when you expand main menu

* solve for iPad preloading

Co-authored-by: Peter Bengtsson <peterbe@mozilla.com>
Co-authored-by: Peter Bengtsson <mail@peterbe.com>

client/src/search-utils.ts

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+
+export type SearchProps = {
+  inputValue: string;
+  onChangeInputValue: (value: string) => void;
+  isFocused: boolean;
+  onChangeIsFocused: (isFocused: boolean) => void;
+};
+
+export function useFocusOnSlash(
+  inputRef: React.RefObject<null | HTMLInputElement>
+) {
+  useEffect(() => {
+    function focusOnSearchMaybe(event) {
+      const input = inputRef.current;
+      if (
+        event.code === "Slash" &&
+        !["TEXTAREA", "INPUT"].includes(event.target.tagName)
+      ) {
+        if (input && document.activeElement !== input) {
+          event.preventDefault();
+          input.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", focusOnSearchMaybe);
+    return () => {
+      document.removeEventListener("keydown", focusOnSearchMaybe);
+    };
+  }, [inputRef]);
+}
+
+function isMobileUserAgent() {
+  return (
+    typeof window !== "undefined" &&
+    (typeof window.orientation !== "undefined" ||
+      navigator.userAgent.indexOf("IEMobile") !== -1)
+  );
+}
+
+const ACTIVE_PLACEHOLDER = "Go ahead. Type your search...";
+// Make this one depend on figuring out if you're on a mobile device
+// because there you can't really benefit from keyboard shortcuts.
+const INACTIVE_PLACEHOLDER = isMobileUserAgent()
+  ? "Site search..."
+  : 'Site search... (Press "/" to focus)';
+
+export const getPlaceholder = (isFocused: boolean) =>
+  isFocused ? ACTIVE_PLACEHOLDER : INACTIVE_PLACEHOLDER;