Blazor Input Date does not revalidate upon value assignment

Question

I have an InputDate from Blazor which should revert to the previous date if the change confirmation is not accepted which works. However, when I input something like 11/31/2024 which is an invalid date and does not accept change it still treats the previous date 12/31/2024 as an invalid date (red lines) as if it did not update.

Using WebAssembly 5.0.7

@page "/test"

<EditForm EditContext="_editContext">
    <DataAnnotationsValidator />
             <InputDate class="mb-3" ValueExpression="@(()=>MyModel.TestDate)"
               Value="MyModel.TestDate"
               ValueChanged="@((DateTime value) => TogglePopUp(value))" />

</EditForm>

@if (ShowPopUp)
{
    <div class="popconfirm">
        Are you sure you want to change?
        <button type="button" class="btn btn-warning" @onclick="() => Confirmation(false)">No</button>
        <button type="button" class="btn btn-primary" @onclick="() => Confirmation(true)">Yes</button>
    </div>
}
    
@code {
    MyClass MyModel;
    EditContext _editContext;
    bool ShowPopUp { get; set; }
    DateTime previousDate { get; set; }

    protected override void OnInitialized()
    {
        MyModel = new() { TestDate = new DateTime(2024,12,31) };
        _editContext = new EditContext(MyModel);
    }


    public class MyClass
    {
        public DateTime TestDate { get; set; }
    }

    private async Task TogglePopUp(DateTime selectedDate)
    {
        previousDate = MyModel.TestDate;
        MyModel.TestDate = selectedDate;
        ShowPopUp = true;
    }

    private void Confirmation(bool confirm)
    {
        if (!confirm)
        {
            MyModel.TestDate = previousDate;
        }
        ShowPopUp = false;
    }
}

Answer 1

It seems it's a known issue for the built in InputDate component for blazor, as a workaround I created a separate component for the confirmation modal and add focus on after render, so that on the first digit it won't allow typing another.

ConfirmationModal.razor

<button type="button" @ref="confirmationModal" class="btn btn-primary" @onclick="() => Confirmation(true)">Yes</button>

private ElementReference confirmationModal;

protected override void OnAfterRender(bool firstRender)
{
    confirmationModal.FocusAsync();
}

this is just a workaround feel free to add fix