diff --git a/src/useKeyboardListNavigation.spec.ts b/src/useKeyboardListNavigation.spec.ts index e512c2d..5ea33c5 100644 --- a/src/useKeyboardListNavigation.spec.ts +++ b/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"); diff --git a/src/useKeyboardListNavigation.ts b/src/useKeyboardListNavigation.ts index 8a6940a..e089bdf 100644 --- a/src/useKeyboardListNavigation.ts +++ b/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 = { ref?: React.MutableRefObject; }; +const IDLE_TIMEOUT_MS = 1000; + export const useKeyboardListNavigation = ({ list, onEnter, @@ -69,6 +71,9 @@ export const useKeyboardListNavigation = ({ interactive: false, }); + const searchTerm = useRef(""); + const idleTimeout = useRef(null); + const index = mapCursorToMax(state.cursor, list.length); const handleKeyDown = useCallback( @@ -95,10 +100,12 @@ export const useKeyboardListNavigation = ({ 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 = ({ 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 = ({ return () => { el.removeEventListener("keydown", handleKeyDown); }; - }, [handleKeyDown]); + }, [handleKeyDown, ref, idleTimeout]); useEffect(() => dispatch({ type: "RESET" }), [list.length]); diff --git a/yarn.lock b/yarn.lock index 08b8645..b28fc16 100644 --- a/yarn.lock +++ b/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 @@ lodash.memoize@4.x: 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"