fix: TimePicker flickers in InteractiveServer rendermode

[TheLever]

🐛 Bug Report

When using a FluentTimePicker in an EditForm on a page which uses interactive server for render mode, the FluentTimePicker bounces input back and forth as you enter numbers for the time.

💻 Repro or Code Sample

1. Create a new Fluent Blazor Web App
2. In Home.razor, paste the following code:

@page "/"
@rendermode InteractiveServer
@using Microsoft.FluentUI.AspNetCore.Components.Extensions

<EditForm Model="TimePickerModel" FormName="TimePickerModel" OnInvalidSubmit="OnInvalidSubmit" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator/>
    <ValidationSummary/>

    <FluentTimePicker Label="Pick time" Value="@TimePickerModel.Time.ToDateTime()"
                      ValueChanged="@(e => TimePickerModel.Time = e.ToTimeOnly())"/>
    <ValidationMessage For="() => TimePickerModel.Time"></ValidationMessage>
    <FluentSpacer/>
    <FluentButton Type="ButtonType.Submit">Submit</FluentButton>
</EditForm>

@code {
    private readonly TimePickerModel TimePickerModel = new()!;

    private void OnInvalidSubmit()
    {
        Console.WriteLine("Oops!");
    }

    private void OnValidSubmit()
    {
        Console.WriteLine("Coolness");
    }
}

with TimePickerModel defined like this:

class TimePickerModel
{
    [Required]
    public TimeOnly Time { get; set; }
}

3. Run the app and try to enter numbers for the time in the picker

🤔 Expected Behavior

I would expect the input to be stable such that no doubt exists as to what is put in

😯 Current Behavior

See attached video

💁 Possible Solution

🔦 Context

I have to have to interactive server render mode on otherwise my validations fail: The validation reports all fields not filled in, and a search suggested to use interactive server render mode, which unfortunately leaves the TimePicker INOP. It should be noted that the data stored seems to be ok (when viewed in the debugger).

https://github.com/microsoft/fluentui-blazor/assets/29521512/fa823b13-822e-4b69-91f8-4f33c10a805a

🌍 Your Environment

• OS & Device: MacOS Sonoma 14.5
• Browser Google Chrome 125.0 6422.114 and Brave Version 1.66.118 Chromium: 125.0.6422.147
• .NET and Fluent UI Blazor library Version .Net 8.0204, Fluent UI 4.7.2

[vnbaaij]

For the time picker we are actually falling back to the default browser component. Perhaps you are running into some issues with that input not being fully supported by the browsers you are using there (https://caniuse.com/input-datetime).

This is what I am seeing on my Edge Canary version:

[TheLever]

I tend to disagree with the verdict here. Are you saying that Chome (which in March of 2024 had 65% of the market share) is not supported? By the way, I can repro this on Edge 125.0.2535.85

[TheLever]

And, also please confirm you're using server interactive render mode

[vnbaaij]

I'm not saying anything is not supported. I'm saying we are using a default browser component for this functionality.

I created a new project from our template as you described. Pasted your repro code and ran it (on Windows). As can be seen from the screengrab, it seems to work there as expected. And yes, that new project is using InteractiveServer. And yes it also works on Edge 125

[dvoituron]

I used your code and got exactly the same result as Vincent.

[TheLever]

It seems it reproduces only on Mac - I tried it on Windows, and there it seems to work. Maybe that warrants a deeper investigation if this is an OS related issue?

[vnbaaij]

I would say you just answered that this is an OS issue 😀. So as you obviously have a Mac to test on (which I don't), what happens when you use a plain <input type="time"/>? Do you observe the same behavior?

[TheLever]

Use a plain? What does that mean?

Given that it is an OS issue, isn't it something you'll have to investigate? Is saying this is unsupported on Mac an ok stance to take? I think the fact that it works fine if the render mode is not server interactive should point the issue at either Blazor in general or the Fluent UI, no?

[vnbaaij]

Oops, some html code got hidden. It is there now. I meant using a plain HTML input component.

The fact that is runs normally on Windows is in fact saying that this is not a library issue. We do not do anything special/different when it is being used on Mac. This leaves it as either a generic Blazor thing (issue should be raised in aspnetcore repo) or it is a browser issue (issue should be raised with Apple, I guess). Using a plain HTML input from both Blazor an maybe even a static HTML page should give an indication of where the issue lies.

Stop saying we are saying it is unsupported. We are not saying that. I'm just saying that that type of input is having issues on a Mac and I hope you understand our span of control is not like we can say to someone "go fix that".

[TheLever]

The simple <input type="time"/> works fine in both Chrome, Brave and Edge, both in a Fluent UI project and a standard Blazor project. It just does not look nearly as good as the FluentTimePicker does :)

[dvoituron]

The problem may be linked to the FluentUI WebComponents used by our Blazor Lib.

Could you try this code on a Mac?

https://jsfiddle.net/dvoituron/azvjqbxh/

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  </head>
  <fluent-text-field type="time"></fluent-text-field>
</html>

[TheLever]

Works fine also.

[TheLever]

Sad to report that the same thing happens with the FluentSlider. You guys still feel this issue should remain closed?