Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

fix: [v5] RenderStyle="Native" restricts input to 08:00–18:00 in FluentTimePicker

Closed Beginner friendly
  • Is something wrong?
#5,344 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
csharp
Domain
frontend

Research direction

Start in FluentTimePicker.razor.cs, specifically OnAfterRenderAsync and the copyToShadow calls for the native control. Reproduce the issue with the provided Razor sample and inspect the shadow input attributes. Done means Native mode accepts times outside 08:00–18:00 without the default min, max, or step restrictions, while the documented FluentUI behavior remains unchanged.

Written by the indexing model from the issue text.

Description

🐛 Bug Report

With RenderStyle="DatePickerRenderStyle.Native", FluentTimePicker still applies its default StartHour/EndHour/Increment to the native <input type="time"> as min="08:00", max="18:00", step="15". You can't enter any time before 08:00 or after 18:00.

This contradicts the TimePicker docs, which say:

If you want the user to be able to enter any time (any hour or any minute), you must enable the mode RenderStyle="Native".

and, for the Native render style:

The following parameters are ignored: Culture, StartHour, EndHour, Increment, DisabledTimeFunc.

💻 Repro or Code Sample

<FluentTimePicker RenderStyle="DatePickerRenderStyle.Native" @bind-Value="@Time" />

@code {
    TimeOnly Time = new(9, 0);
}
  1. Try to enter 20:00 or 07:00.
  2. The browser won't accept it. The native picker won't go past 18:00 or below 08:00, and the input is :invalid if a value is typed.
  3. Inspect the inner input[part="control"] in the shadow root: it has min="08:00" max="18:00" step="15".

🤔 Expected Behavior

In Native mode, any time of day can be entered, as the docs describe. StartHour/EndHour/Increment should not restrict the native input.

😯 Current Behavior

FluentTimePicker.razor.cs → OnAfterRenderAsync (current dev branch, also in 5.0.0-rc.5-26219.1) copies all three onto the shadow control whenever the style isn't FluentUI:

// Set the attribute min/max/step on the shadow "control" element.
await JSRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Utilities.Attributes.copyToShadow",
    Id, "[part='control']", "min", DefaultTime.AddHours(StartHour).ToString("HH:mm", CultureInfo.InvariantCulture));
await JSRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Utilities.Attributes.copyToShadow",
    Id, "[part='control']", "max", DefaultTime.AddHours(EndHour).ToString("HH:mm", CultureInfo.InvariantCulture));
await JSRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Utilities.Attributes.copyToShadow",
    Id, "[part='control']", "step", Increment);

Two side effects:

  • The defaults are 8 and 18, so every Native picker is limited to 08:00–18:00 unless the caller overrides both.
  • step on <input type="time"> is in seconds, so Increment = 15 becomes a 15-second step, not 15 minutes.

Setting StartHour="0" EndHour="23" only partly works around it: 23:01–23:59 is still blocked. EndHour="24" formats as "00:00", which puts max below min.

💁 Possible Solution

Either:

  • don't copy min/max/step in Native mode, matching the docs, or
  • only copy them when the caller explicitly set StartHour/EndHour/Increment. If step is kept, convert it to seconds (Increment * 60) and allow max to reach 23:59.

If the current behaviour is intended, the docs need updating, and there should be a way to get an unrestricted Native picker.

Our workaround for now is a subclass that re-applies min="00:00" max="23:59" step="60" after base.OnAfterRenderAsync(firstRender).

🔦 Context

We use Native time pickers for staff shift start/end times. Evening and overnight shifts (e.g. 22:00–06:00) couldn't be entered at all.

🌍 Your Environment

  • OS & Device: Windows / Linux / Android, PC and phone
  • Browser: Google Chrome, Microsoft Edge
  • .NET 10 and Microsoft.FluentUI.AspNetCore.Components 5.0.0-rc.5-26219.1 (code unchanged on current dev)
Dominant language
C#
Stars
4.8k
Forks
483
Avg merge
15h 36m
Merged PRs (30d)
77

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui-blazor

All issues in microsoft/fluentui-blazor

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.