feat(frontend): keyboard navigation for GlobalSearch results#148
Merged
Kevin737866 merged 3 commits intoJun 1, 2026
Merged
Conversation
- Fix ArrowDown/ArrowUp navigation to clamp within bounds instead of wrapping with modulo, which caused NaN errors on empty result sets - Guard navigation with `if (total > 0)` to handle empty results safely - Add vitest + @testing-library/react test infrastructure to frontend - Add 10 unit tests covering keyboard nav, edge cases, and the old bug - Add frontend-specific .eslintrc.cjs (root config was unresolvable) Fixes: ArrowDown/ArrowUp % 0 producing NaN when results list is empty
|
@Bill-tech1 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #123
Summary
Adds correct Up/Down Arrow keyboard navigation to the
GlobalSearchcomponent and sets up the frontend unit test infrastructure.Problem
The existing
handleKeyDownused modulo arithmetic for navigation:This had two bugs:
total === 0,% 0producesNaN, corruptingactiveIndexstate.Changes
packages/frontend/src/components/GlobalSearch.tsxReplaced modulo navigation with clamped navigation guarded by an empty-results check:
All existing behaviour (mouse clicks, Enter to select, Escape to close, Ctrl+K shortcut, search history, accessibility attributes) is preserved unchanged.
Test infrastructure (new)
vitest@1+@testing-library/react+jsdomadded as devDependenciesvite.config.tsextended with atestblock (environment: 'jsdom', globals, setupFiles)test/test:watchscripts added topackage.jsonsrc/test/setup.tsimports@testing-library/jest-dommatcherspackages/frontend/src/components/__tests__/GlobalSearch.test.tsx(new)10 tests across two suites:
packages/frontend/.eslintrc.cjs(new)The root
.eslintrc.jsreferences@typescript-eslint/recommendedbut the package was not resolvable from the workspace root, makingpnpm lintfail with a config error before this PR. A frontend-specific config is added sopnpm lintruns cleanly.Testing
Notes
mainbefore this branch.