feat: supports full term search

src/useKeyboardListNavigation.spec.ts

@@ -3,6 +3,8 @@ import { fireEvent } from "@testing-library/react";
 import { useKeyboardListNavigation } from "./useKeyboardListNavigation";
 import { useRef } from "react";
 
+jest.useFakeTimers();
+
 describe("useKeyboardListNavigation", () => {
   const list = ["first", "second", "third", "fourth"];
   const noop = () => {};
@@ -146,7 +148,46 @@ describe("useKeyboardListNavigation", () => {
     expect(result.current.selected).toBe("first");
   });
 
-  it("selects the third item when the t key is pressed", () => {
+  it("selects the third item when the t key is pressed; then narrows down into the fifth once more is typed", () => {
+    const { result } = renderHook(() =>
+      useKeyboardListNavigation({
+        list: ["first", "second", "third", "fourth", "thirteenth"],
+        onEnter: noop,
+      })
+    );
+
+    expect(result.current.cursor).toBe(0);
+    expect(result.current.index).toBe(0);
+    expect(result.current.selected).toBe("first");
+
+    act(() => {
+      fireEvent.keyDown(window, { key: "t" });
+    });
+
+    expect(result.current.cursor).toBe(2);
+    expect(result.current.index).toBe(2);
+    expect(result.current.selected).toBe("third");
+
+    act(() => {
+      fireEvent.keyDown(window, { key: "h" });
+      fireEvent.keyDown(window, { key: "i" });
+      fireEvent.keyDown(window, { key: "r" });
+    });
+
+    expect(result.current.cursor).toBe(2);
+    expect(result.current.index).toBe(2);
+    expect(result.current.selected).toBe("third");
+
+    act(() => {
+      fireEvent.keyDown(window, { key: "t" });
+    });
+
+    expect(result.current.cursor).toBe(4);
+    expect(result.current.index).toBe(4);
+    expect(result.current.selected).toBe("thirteenth");
+  });
+
+  it("selects the third item when the t key is pressed; after one second, selects the second item when the s key is pressed", () => {
     const { result } = renderHook(() =>
       useKeyboardListNavigation({
         list,
@@ -162,6 +203,8 @@ describe("useKeyboardListNavigation", () => {
       fireEvent.keyDown(window, { key: "t" });
     });
 
+    jest.runAllTimers();
+
     expect(result.current.cursor).toBe(2);
     expect(result.current.index).toBe(2);
     expect(result.current.selected).toBe("third");

src/useKeyboardListNavigation.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useReducer } from "react";
+import { useCallback, useEffect, useReducer, useRef } from "react";
 import { mapCursorToMax } from "map-cursor-to-max";
 
 export type UseKeyboardListNavigationAction =
@@ -22,7 +22,7 @@ const reducer = (
 ): UseKeyboardListNavigationState => {
   switch (action.type) {
     case "RESET":
-      return { ...state, cursor: 0, interactive: false };
+      return { ...state, interactive: false };
     case "INTERACT":
       return { ...state, interactive: true };
     case "PREV":
@@ -56,6 +56,8 @@ export type UseKeyboardListNavigationProps<T> = {
   ref?: React.MutableRefObject<any>;
 };
 
+const IDLE_TIMEOUT_MS = 1000;
+
 export const useKeyboardListNavigation = <T>({
   list,
   onEnter,
@@ -69,6 +71,9 @@ export const useKeyboardListNavigation = <T>({
     interactive: false,
   });
 
+  const searchTerm = useRef("");
+  const idleTimeout = useRef<NodeJS.Timeout | null>(null);
+
   const index = mapCursorToMax(state.cursor, list.length);
 
   const handleKeyDown = useCallback(
@@ -95,10 +100,12 @@ export const useKeyboardListNavigation = <T>({
           return dispatch({ type: "LAST" });
         }
         default:
-          // Set focus based on first character
+          // Set focus based on search term
           if (/^[a-z0-9_-]$/i.test(event.key)) {
+            searchTerm.current = `${searchTerm.current}${event.key}`;
+
             const node = list.find((item) =>
-              extractValue(item).startsWith(event.key)
+              extractValue(item).startsWith(searchTerm.current)
             );
 
             if (node) {
@@ -107,12 +114,18 @@ export const useKeyboardListNavigation = <T>({
                 payload: { cursor: list.indexOf(node) },
               });
             }
+
+            if (idleTimeout.current) clearTimeout(idleTimeout.current);
+
+            idleTimeout.current = setTimeout(() => {
+              searchTerm.current = "";
+            }, IDLE_TIMEOUT_MS);
           }
 
           break;
       }
     },
-    [index, list, onEnter, state, waitForInteractive]
+    [index, list, onEnter, state, waitForInteractive, extractValue]
   );
 
   useEffect(() => {
@@ -121,7 +134,7 @@ export const useKeyboardListNavigation = <T>({
     return () => {
       el.removeEventListener("keydown", handleKeyDown);
     };
-  }, [handleKeyDown]);
+  }, [handleKeyDown, ref, idleTimeout]);
 
   useEffect(() => dispatch({ type: "RESET" }), [list.length]);
 

yarn.lock

@@ -1963,7 +1963,7 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -3118,7 +3118,7 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -4306,11 +4306,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -4319,33 +4314,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._root@~3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
@@ -4391,11 +4364,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"