MudDatePicker: Add keyboard navigation by spingee · Pull Request #12028 · MudBlazor/MudBlazor

spingee · 2025-11-01T14:13:47Z

Features:
When popup is opened it can be navigated with keys:

Arrows keys:
Navigates years/months/days in respective views
Shift + arrows keys:
Navigates years in month view
Navigates years and months in date view
Enter:
Selects value in current view and moves to next view or commits value to input and closes popup on last view
Backspace
Closes popup when first view and doesnt commit value to input
Moves to previous view if not first view

Fixes:
Datepicker now retains focus when value is selected

Recording.2025-11-10.130047.mp4

Copilot

Pull Request Overview

This PR enhances keyboard navigation in the MudDatePicker component by implementing arrow key navigation across different picker views (Date, Month, Year) and enabling Enter key selection. The changes also include focus management improvements and mouse event handling adjustments.

Implemented arrow key navigation (left/right/up/down) for navigating dates, months, and years
Enhanced Enter key handling to select the currently highlighted date/month/year based on the current view
Added FocusAsync() calls when clicking on dates, months, and years for better accessibility
Modified event handlers to prevent default mouse behavior on certain picker elements

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
MudDatePicker.cs	Core logic for keyboard navigation: arrow key handlers for navigating dates/months/years, Enter key selection for highlighted items, and FocusAsync calls in click handlers
MudBaseDatePicker.razor.cs	Changed visibility of helper methods/fields from private to protected, updated ScrollToYear to accept optional date parameter, trailing whitespace cleanup
MudBaseDatePicker.razor	Added mousedown preventDefault attributes to toolbar and calendar content, cleaned up lambda expressions
DatePickerTests.cs	Added comprehensive test for keyboard navigation and date selection workflow

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

danielchalmers

The code is fairly dense and nested with no comments. Could you also expand on the PR description with images/videos?

igotinfected

Very cool feature, thanks!

Added some minor code suggestions.

Here's a list of issues I came across while testing (none of them blocking for the PR I believe):

keyboard navigation doesn't work on a DatePicker with PickerVariant="PickerVariant.Static"
in the fixed values usage section
- when the month is fixed you can get into a weird state by using the Shift+Left/Right Arrow shortcuts

when the year is fixed, when you click on the year while you're in the day view you can get into a weird state (click any day, then click on the year)

because of the change to the MudPicker.razor (KeyDownPreventDefault="Open") file, when any picker popup is open you can no longer type into the text field (probably not an issue but good to know)

We should also add a section to the DatePicker docs listing all the new shortcuts, you can refer to MudRating for an example.

igotinfected · 2025-11-21T21:29:11Z

src/MudBlazor/Components/DatePicker/MudBaseDatePicker.razor

    protected override RenderFragment PickerContent =>
    @<CascadingValue Value="@this" IsFixed="true">
-        <MudPickerToolbar Class="mud-picker-datepicker-toolbar" ShowToolbar="@ShowToolbar" Orientation="@Orientation" PickerVariant="@PickerVariant" Color="@Color">
+        <MudPickerToolbar Class="mud-picker-datepicker-toolbar" ShowToolbar="@ShowToolbar" Orientation="@Orientation" PickerVariant="@PickerVariant" Color="@Color" @onmousedown:preventDefault="true">


out of curiosity -- why is the onmousedown needed?

@igotinfected to not lose focus on input field, when clicking buttons in toolbar

igotinfected · 2025-11-21T21:41:52Z

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

@@ -259,17 +276,67 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
                case "ArrowRight":
                    if (Open)


you could invert the if to reduce nesting

igotinfected · 2025-11-21T21:43:46Z

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

                    if (Open)
                    {
-
+                        if (args.ShiftKey)


this if and the switch + case below could be a single if

igotinfected · 2025-11-21T21:45:03Z

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

                    }
+
                    break;
                case "ArrowLeft":


same comments as for ArrowRight case

igotinfected · 2025-11-21T21:45:40Z

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

@@ -279,12 +346,52 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
                    }
                    else if (args.ShiftKey)


if/switch can be simplified

igotinfected · 2025-11-21T21:49:55Z

src/MudBlazor/Components/DatePicker/MudDatePicker.cs

@@ -293,35 +400,93 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
                    }
                    else if (args.ShiftKey)


can be simplified

igotinfected · 2025-11-21T21:53:58Z

src/MudBlazor/Components/DatePicker/MudBaseDatePicker.razor.cs

        /// Scrolls to the current year.
        /// </summary>
-        public async void ScrollToYear()
+        public async Task ScrollToYear(DateTime? date = null)


add Async suffix to indicate it's an async method

danielchalmers · 2025-11-23T03:58:31Z

Thank you for this!

spingee changed the title ~~Ability to navigate datepicker with keys~~ DatePicker: Ability to navigate datepicker with keys Nov 1, 2025

mudbot bot added accessibility Accessibility concerns (ARIA, keyboard, focus, screen readers, contrast) enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library labels Nov 1, 2025

This comment was marked as spam.

Sign in to view

spingee force-pushed the feature/datepicker_key_nav branch from d14ba74 to 88ec782 Compare November 1, 2025 14:21

danielchalmers requested a review from Copilot November 1, 2025 16:07

Copilot AI reviewed Nov 1, 2025

View reviewed changes

src/MudBlazor/Components/DatePicker/MudDatePicker.cs Outdated Show resolved Hide resolved

src/MudBlazor/Components/DatePicker/MudDatePicker.cs Outdated Show resolved Hide resolved

src/MudBlazor/Components/DatePicker/MudDatePicker.cs Outdated Show resolved Hide resolved

spingee force-pushed the feature/datepicker_key_nav branch from 88ec782 to d696c07 Compare November 2, 2025 13:48

danielchalmers requested changes Nov 6, 2025

View reviewed changes

mudbot bot added needs: changes A maintainer has asked for further modifications to be made to this pull request needs: info This issue/PR lacks key context (goal, setup, environment) needs: visuals This issue/PR needs screenshots or video for UI bugs or design changes labels Nov 7, 2025

spingee force-pushed the feature/datepicker_key_nav branch 4 times, most recently from db8b8b0 to 966ebda Compare November 9, 2025 16:30

spingee requested a review from danielchalmers November 10, 2025 12:03

danielchalmers requested a review from igotinfected November 13, 2025 00:13

igotinfected reviewed Nov 21, 2025

View reviewed changes

spingee added 5 commits November 22, 2025 13:39

Ability to navigate datepicker with keys

7297dfb

Return Task instead of void (SonarQube fix)

511a14b

Ability to navigate year/month in date/month view with shift+arrows

0ca7253

Tests

e64a7f4

Improve code by review suggestions

8fa05bd

spingee force-pushed the feature/datepicker_key_nav branch from 966ebda to 8fa05bd Compare November 22, 2025 13:05

danielchalmers changed the title ~~DatePicker: Ability to navigate datepicker with keys~~ MudDatePicker: Add keyboard navigation Nov 22, 2025

danielchalmers removed needs: info This issue/PR lacks key context (goal, setup, environment) needs: visuals This issue/PR needs screenshots or video for UI bugs or design changes needs: changes A maintainer has asked for further modifications to be made to this pull request labels Nov 23, 2025

		@@ -259,17 +276,67 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
		case "ArrowRight":
		if (Open)

		@@ -279,12 +346,52 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
		}
		else if (args.ShiftKey)

		@@ -293,35 +400,93 @@ protected internal override async Task OnHandleKeyDownAsync(KeyboardEventArgs ar
		}
		else if (args.ShiftKey)

Uh oh!

Conversation

spingee commented Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as spam.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielchalmers left a comment

Choose a reason for hiding this comment

Uh oh!

igotinfected left a comment

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

spingee Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

igotinfected Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

danielchalmers commented Nov 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

spingee commented Nov 1, 2025 •

edited

Loading

spingee Nov 23, 2025 •

edited

Loading