TT-7622 fix: focus wheel picker on click so keyboard arrows work - #535
Open
nabalone wants to merge 1 commit into
Open
TT-7622 fix: focus wheel picker on click so keyboard arrows work#535nabalone wants to merge 1 commit into
nabalone wants to merge 1 commit into
Conversation
The Edit Reference wheel pickers (@ncdai/react-wheel-picker) have built-in Arrow-key handling on their internal element, but that element only received focus when tabbed to. On click the library calls preventDefault() on mousedown to drive its drag/scroll, which also stops the browser from focusing the wheel, so after clicking a wheel the Up/Down arrow keys did nothing. Focus the wheel ourselves on click to close that gap; tab users already get focus for free. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes TT-7622 in the Mark Verses → Edit Reference dialog by ensuring the chapter/verse/suffix wheel pickers receive keyboard focus after a mouse click, so their built-in Up/Down arrow key handling works as expected.
Changes:
- Adds a
focusWheelOnClickclick handler that focuses the wheel picker’s internal[data-rwp]element. - Wires the click handler onto the wheel column wrapper so click-then-arrow works without affecting tab-based keyboard navigation.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+304
to
+306
| const focusWheelOnClick = useCallback((event: MouseEvent<HTMLDivElement>) => { | ||
| event.currentTarget.querySelector<HTMLElement>('[data-rwp]')?.focus(); | ||
| }, []); |
gtryus
approved these changes
Aug 26, 2026
gtryus
left a comment
gtryus
left a comment
Contributor
There was a problem hiding this comment.
Copilot is suggesting an additional test.
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.
Summary
Fixes TT-7622: in the Mark Verses → Edit Reference dialog, the Chapter/Verse/Suffix wheel pickers did not respond to the keyboard Up/Down arrow keys after being clicked.
Root cause
The wheel pickers use
@ncdai/react-wheel-picker, which does have built-in Arrow-key handling on its internal[data-rwp]element — but that element only receives keyboard focus when tabbed to. On click, the library callspreventDefault()onmousedown(to drive its drag/scroll gesture), andpreventDefaultonmousedownalso stops the browser from moving focus to the element. So after the user clicked a wheel (the exact repro steps), the wheel never had focus and its arrow-key handler never fired.Fix
Focus the wheel's internal element ourselves in an
onClickhandler on the wheel column wrapper. Keyboard users who tab in already get focus for free, so this is a no-op for them; it only closes the click-then-arrow gap.Test plan
npm run typecheck— cleaneslinton the changed file — cleanjest EditReferenceDropdown— 7/7 pass🤖 Generated with Claude Code