feat: add arrow key navigation to GridView#509
Merged
Conversation
Add keyboard navigation support to GridView so that arrow keys move selection between items when a GridViewItem has focus. This prevents arrow key events from bubbling up to parent handlers (e.g. viewport camera controls in the Editor). - ArrowLeft/Right navigate between adjacent siblings - ArrowUp/Down navigate between rows, preserving column position - Handles both horizontal (default) and vertical grid layouts - Uses event delegation on the GridView container for efficiency - Properly calls preventDefault/stopPropagation to consume handled keys Made-with: Cursor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds keyboard navigation support to the GridView component, allowing users to navigate between grid items using arrow keys. The implementation prevents arrow key events from bubbling up to parent handlers (like the camera-fly system in the PlayCanvas Editor), matching the behavior of TreeView and Table components.
Changes:
- Added event delegation-based keyboard handler to GridView for arrow key navigation
- Implemented
_findItemInAdjacentRowmethod to navigate between rows/columns while preserving position - Added
_selectSingleItemhelper method to handle single-item selection during navigation
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
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
GridViewso that arrow keys move selection between items when aGridViewItemhas focusGridViewcontainer DOM for efficiency (no per-item listeners needed)preventDefault()/stopPropagation()on handled keys to prevent parent handlers from consuming themMotivation
When a
GridViewItemhas focus (e.g. after clicking an asset in the PlayCanvas Editor's grid view), arrow key events bubble up towindowunhandled. The Editor's camera-fly system catches them and moves the viewport camera, which is unexpected. TheTreeViewandTablecomponents already handle arrow keys and stop propagation;GridViewwas the only component missing this.Test plan