Add FocusedValue bindable parameter to Select component#148
Merged
LittleLittleCloud merged 9 commits intomainfrom Nov 21, 2025
Merged
Add FocusedValue bindable parameter to Select component#148LittleLittleCloud merged 9 commits intomainfrom
LittleLittleCloud merged 9 commits intomainfrom
Conversation
Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add OnFocusChanged() event handler to Select component
Add FocusedValue bindable parameter to Select component
Nov 18, 2025
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a bindable FocusedValue parameter to the Select component, enabling parent components to track which option is currently highlighted during keyboard navigation. This facilitates implementing scrollable windows for large option lists and preview functionality. The PR also refactors the Gallery app to use the Select component in the navigation bar and relocates instructions and version tracking to a new footer component.
Key Changes
- Select component enhancement: Introduced two-way binding for
FocusedValueto expose the currently highlighted option, along withIsFocusedbinding and customizable indicators - Gallery UI restructure: Replaced button-based navigation with a
Selectcomponent in the navbar, moved instructions and version info to a new footer component - Test coverage: Added basic tests for the new
FocusedValueparameter and backward compatibility
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| src/RazorConsole.Core/Components/Select.razor | Added FocusedValue, IsFocused, and AdditionalAttributes parameters with two-way binding support; refactored internal state management to use parameters directly |
| src/RazorConsole.Gallery/Pages/SelectGallery.razor | Updated example to demonstrate @bind-FocusedValue and @bind-IsFocused usage with visual feedback |
| src/RazorConsole.Gallery/Components/NavBar.razor | Converted from button-based navigation to Select component with focus state management |
| src/RazorConsole.Gallery/Layouts/MainLayout.razor | Added footer component and two-way binding for navbar focus state |
| src/RazorConsole.Gallery/Components/Header.razor | Removed version tracking and instructions (moved to footer) |
| src/RazorConsole.Gallery/Components/Footer.razor | New component displaying dynamic instructions based on navbar focus state and version information |
| src/RazorConsole.Tests/SelectTests.cs | Added tests for FocusedValue binding and backward compatibility (basic rendering verification only) |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>
TeseySTD
approved these changes
Nov 21, 2025
ParadiseFallen
approved these changes
Nov 21, 2025
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.
Adds a bindable
FocusedValueparameter to track the currently highlighted option during keyboard navigation, enabling parent components to implement scrollable windows for large option lists or preview functionality.Also update gallery app to use Select in NavBar and move instructions && version tracker to footer
Changes
Select.razor: Added
FocusedValueandFocusedValueChangedparameters with two-way binding supportOnParametersSetSelectGallery.razor: Updated example to demonstrate
@bind-FocusedValueusageSelectTests.cs: Added test coverage for FocusedValue binding and backward compatibility
Usage
The focused value updates as users navigate with arrow keys, before they commit a selection with Enter.
Fixes #145
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.