microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.78k stars 363 forks source link

fix: FluentDatePicker in forms do not mark EditForm.EditContext as modified #1332

Closed yarseyah closed 9 months ago

yarseyah commented 9 months ago

🐛 Bug Report

When a FluentDataPicker is used within an EditForm, which is bound to a default null value, selecting a date does not mark the field/form as dirty.

💻 Repro or Code Sample

<FluentLabel Typo="Typography.H1">FluentDatePicker not marking form as dirty</FluentLabel>

<EditForm @ref=form
          Model=model>
    <FluentTextField 
        Label="Name" 
        @bind-Value=model.Name />
    <FluentDatePicker 
        Label="DateTime"
        Culture="@(System.Globalization.CultureInfo.GetCultureInfo("en-GB"))"
        @bind-Value=model.DateTime />
</EditForm>

<FluentLabel Typo="Typography.H2">
    Form @(form.EditContext?.IsModified() ?? false ? "dirty" : "unchanged")
</FluentLabel>

@code {
    private EditForm form = default!;

    private readonly Model model = new();

    private class Model
    {
        public string Name { get; set; } = string.Empty;

        public DateTime? DateTime { get; set; }
    }
}

🤔 Expected Behavior

form.EditContext?.IsModified() should return true, which is what happens when the Name field in example is modified.

😯 Current Behavior

image

Form with Name changed

image

[reset] form with DateTime selected

image

💁 Possible Solution

🔦 Context

I need to know whether the form has been modified as part of the validation to enable/disable other aspects, including custom validation, without this trigger, it isn't possible to determine if the user has changed/selected a DateTime.

The same lack of IsModified can be seen on the specific field, e.g. form?.EditContext?.IsModified(() => Model.DateTime)

🌍 Your Environment

yarseyah commented 9 months ago

Note that the InputDate correctly marks the form as dirty, e.g. in my example, replace the FluentTextField and FluentDatePicker with the following:

    <InputDate @bind-Value=model.DateTime />
    <InputText @bind-Value=model.Name />

Yields the following expected behaviour:

image