Skip to content

Add FocusedValue bindable parameter to Select component#148

Merged
LittleLittleCloud merged 9 commits intomainfrom
copilot/add-onfocuschanged-to-select
Nov 21, 2025
Merged

Add FocusedValue bindable parameter to Select component#148
LittleLittleCloud merged 9 commits intomainfrom
copilot/add-onfocuschanged-to-select

Conversation

Copy link
Contributor

Copilot AI commented Nov 18, 2025

Adds a bindable FocusedValue parameter 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

image

Changes

  • Select.razor: Added FocusedValue and FocusedValueChanged parameters with two-way binding support

    • Invokes callback on arrow key navigation, type-ahead, selection, and focus loss
    • Synchronizes with parent-supplied values in OnParametersSet
  • SelectGallery.razor: Updated example to demonstrate @bind-FocusedValue usage

  • SelectTests.cs: Added test coverage for FocusedValue binding and backward compatibility

Usage

<Select Options="@options"
        @bind-Value="selectedOption"
        @bind-FocusedValue="focusedOption" />

<Markup Content=@($"Currently viewing: {focusedOption}") />

The focused value updates as users navigate with arrow keys, before they commit a selection with Enter.

Fixes #145

Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: Add OnFocusChanged() to Select</issue_title>
<issue_description>### Feature Description

As suggested in an earlier issue, add an OnFocusChanged() event handler to the Select component that is invoked when the highlighted option is changed.

Problem Statement

Problem 1:
The Select component does not have a way to page/scroll options and when the option list is too large it can overfill a console window.

Problem 2:
The Select component does not have an event handler invoked when the user changes the highlighted option via up/down navigation, which might otherwise provide a way to implement a scrollable window over a large options list.

Proposed Solution

OnFocusChanged() is added to the Select component.

Alternatives Considered

OnHighlightedValueChanged() could be a different name for the same event handler functionality proposed here.

Additional Context

No response

Contribution

  • I'd be willing to contribute this feature</issue_description>

Comments on the Issue (you are @copilot in this section)

@LittleLittleCloud For problem 1, maybe look at scrollable example, it should be a perfectly fit for select with super long list.

For problem 2, Copilot go add a new parameter called FocusedValue so user can bind it from parent components.</comment_new>


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

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
@LittleLittleCloud LittleLittleCloud marked this pull request as ready for review November 18, 2025 08:07
Copilot AI review requested due to automatic review settings November 18, 2025 08:07
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 FocusedValue to expose the currently highlighted option, along with IsFocused binding and customizable indicators
  • Gallery UI restructure: Replaced button-based navigation with a Select component in the navbar, moved instructions and version info to a new footer component
  • Test coverage: Added basic tests for the new FocusedValue parameter 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)

@LittleLittleCloud LittleLittleCloud merged commit df09098 into main Nov 21, 2025
5 checks passed
@LittleLittleCloud LittleLittleCloud deleted the copilot/add-onfocuschanged-to-select branch November 21, 2025 15:48
@github-actions github-actions bot added this to the v0.2.0 milestone Nov 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Add OnFocusChanged() to Select

6 participants