fix: FluentDatePicker does not update value when current value is null and user selects date from drop down calendar in FluentDatePicker #2237
Description
🐛 Bug Report
💻 Repro or Code Sample
@page "/test"
<FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
<PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
<PropertyColumn Width="300px" Property="@(p => p.Name)" />
<TemplateColumn Width="150px" Title="Birthdate" Sortable="true" SortBy="@_sortByBirthDate" Align="Align.Center" Filtered="startDate != null || endDate != null" >
<ColumnOptions>
<div class="search-box">
<div>
<FluentDatePicker @bind-Value="startDate" Label="Start date" DisabledDateFunc="@DisabledStartDate" />
</div>
<div>
<FluentDatePicker @bind-Value="endDate" Label="End date" DisabledDateFunc="@DisabledEndDate" />
</div>
</div>
</ColumnOptions>
<ChildContent>
@context!.BirthDate.ToString("yyyy-MM-dd")
</ChildContent>
</TemplateColumn>
</FluentDataGrid>
<div>
<b>Peoples:</b>
@String.Join("; ", People.Where(p => p.Selected).Select(p => p.Name))
</div>
@code {
DateTime? startDate = null;
DateTime? endDate = null;
private readonly GridSort<Person> _sortByBirthDate =
GridSort<Person>.ByAscending(d => d.BirthDate);
private bool DisabledStartDate(DateTime date)
{
return endDate.HasValue && date > endDate.Value;
}
private bool DisabledEndDate(DateTime date)
{
return startDate.HasValue && date < startDate.Value;
}
record Person(int PersonId, string Name, DateOnly BirthDate)
{
public bool Selected { get; set; }
};
static IQueryable<Person> People = new[]
{
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)) { Selected = true },
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
}.AsQueryable();
}
🤔 Expected Behavior
User should be able to select a Date even if the current value is null.
To reproduce, run this example, and click the filter icon on the Birtdate field. There is a date picker for startDate and endDate. Trying to change the dates by clicking the calendar does not work.
😯 Current Behavior
When user clicks a date from the calendar, the components value is not updated. If the user first types in a new date, that value is applied, and then the date picker works correctly. Or initializing with a non-null value it will also work.
💁 Possible Solution
No solutions.
🔦 Context
This is an issue as of Fluent 4.8.0 release.
🌍 Your Environment
Chrome Version 126.0.6478.62 (Official Build) (arm64)
Mac OS Sonoma 14.5 arm64