MudSelect: Add SelectionOnEnter, Improve Pager keyboard UX#12405
MudSelect: Add SelectionOnEnter, Improve Pager keyboard UX#12405danielchalmers merged 3 commits intoMudBlazor:devfrom
Conversation
New Parameter: Added SelectionOnEnter (bool). When true, arrow key navigation only moves the visual highlight. Logic Update: Refactored SelectAdjacentItem to skip SetValueAndUpdateTextAsync when SelectionOnEnter is enabled, requiring Enter or NumpadEnter to commit the selection. Documentation: Updated the Keyboard Navigation section in the docs to explain the new behavior and key bindings. Pagers MudTablePager & MudDataGridPager: Enabled SelectionOnEnter="true" by default. This fixes the "jumping" behavior where the table would refresh for every arrow-key press when changing rows per page. Testing New Test Component: Created SelectTest3 specifically to verify the SelectionOnEnter state. New Unit Test: Added SelectTest_SelectionOnEnter_ShouldOnlyChangeOnEnter to ensure value binding only occurs after the Enter key is pressed.
nccadman19
changed the title
mudbot
bot
added
enhancement
|
@danielchalmers @versile2 wonder if it's something that should be by default. I see many frameworks require an enter, like MUI |
I would probably stick with the native |
There was a problem hiding this comment.
Pull request overview
This PR introduces a new SelectionOnEnter parameter to MudSelect that enables keyboard navigation without immediate value updates. When enabled, users must press Enter to confirm their selection, preventing expensive data reloads in paginated components.
Key Changes:
- Added
SelectionOnEnterboolean parameter toMudSelect(defaults tofalsefor backward compatibility) - Modified arrow key navigation to only highlight items when
SelectionOnEnteris enabled - Enabled
SelectionOnEnter="true"in bothMudTablePagerandMudDataGridPagerto prevent rapid table reloads
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/MudBlazor/Components/Select/MudSelect.razor.cs |
Added SelectionOnEnter parameter and modified SelectAdjacentItem to skip immediate value updates when enabled |
src/MudBlazor/Components/Table/MudTablePager.razor |
Enabled SelectionOnEnter="true" on the rows-per-page selector |
src/MudBlazor/Components/DataGrid/MudDataGridPager.razor |
Enabled SelectionOnEnter="true" on the rows-per-page selector |
src/MudBlazor.UnitTests/Components/SelectTests.cs |
Added test to verify arrow keys don't change value until Enter is pressed |
src/MudBlazor.UnitTests.Viewer/TestComponents/Select/SelectTest3.razor |
Created test component with SelectionOnEnter enabled for unit testing |
src/MudBlazor.Docs/Pages/Components/Select/SelectPage.razor |
Updated keyboard navigation documentation to explain the new parameter |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
That is absolutely tough. If it were a new control from scratch I would definitely do it by default, but I do think we desperately need this feature and yeah it shouldn't change existing functionality. There should be an additional doc setting explaining it too. - Opinion |
You mean an example or what? Since there was added a: mention in the doc. |
|
Hey, I've updated the spacing in docs as requested by Copilot, is there anywhere else you want me to add documentation regarding this? |
danielchalmers
requested review from
ScarletKuro,
danielchalmers and
versile2
danielchalmers
changed the title
|
Thank you! |
feat(
MudSelect): addSelectionOnEnterand improve Pager keyboard UXRelated Issues
Fix #12404
Fix #9718
Summary
Introduces a new parameter
SelectionOnEntertoMudSelectand enables it forMudTablePagerandMudDataGridPager. This allows users to navigate dropdown options via keyboard without triggering an immediate value change, which is particularly beneficial for paginated components to prevent multiple expensive data reloads during navigation.Key Changes
MudSelect
New Parameter: Added
SelectionOnEnter(bool). When true, arrow key navigation only moves the visual highlight.Logic Update: Refactored SelectAdjacentItem to skip SetValueAndUpdateTextAsync when SelectionOnEnter is enabled, requiring Enter or NumpadEnter to commit the selection.
Documentation
Updated the Keyboard Navigation section in the docs to explain the new behaviour and key bindings.
Pagers
MudTablePager&MudDataGridPager: EnabledSelectionOnEnter="true"by default. This fixes the "jumping" behaviour where the table would refresh for every arrow-key press when changing rows per page.Testing
New Test Component: Created SelectTest3 specifically to verify the
SelectionOnEnterstate.New Unit Test: Added S
electTest_SelectionOnEnter_ShouldOnlyChangeOnEnterto ensure value binding only occurs after the Enter key is pressed.How Has This Been Tested?
Manual Verification: Tested in the
MudBlazor.Docsenvironment to ensure thatMudTableandMudDataGridpagers no longer refresh until the user explicitly selects a new page size with Enter and thatMudSelectworks as expected for all others. Testing in MudBlazor.UnitTests.Viewer and it outputs the same results.Unit Tests: Ran all tests. Original tests pass (preserving backward compatibility), and the new test confirms the "selection-on-enter" logic.
Type of Changes
Checklist
Remaining Issues / Clarifications
N/A