blazorbootstrap icon indicating copy to clipboard operation
blazorbootstrap copied to clipboard

Pressing clear on DateInput does not fire a value changed event.

Open rainfallgames opened this issue 8 months ago • 5 comments

Describe the bug

Selecting a date in the DateInput fires a changed event. Clearing the date from the DateInput does not fire an event.

Expected behavior A change event should fire.

Sample code

<DateInput id="dateTime" Placeholder="Date:" @bind-Value="@dateTime"/>

@code {
    private EditContext editContext;

    private DateTime? dateTime;

    protected override void OnInitialized()
    {
        editContext = new EditContext(Query);
        editContext.OnFieldChanged += HandleFieldChanged;

        async void HandleFieldChanged(object? sender, FieldChangedEventArgs args)
        { 
            // Do something.
        }
    }
}

Desktop (please complete the following information):

  • OS: Windows
  • Browser Firefox
  • Version - Blazor.Bootstrap 1.10.3

rainfallgames avatar Nov 03 '23 13:11 rainfallgames

#340

gvreddy04 avatar Nov 04 '23 10:11 gvreddy04

@gvreddy04 I've took a look on it. It turns out when you click on reset the onchange event is being triggered with an empty string as new Value. Since we don't update anymore for empty values, the value will never be set.

However when we revert this change done in #343 then #340 will be broken again.

Microsoft prevents this in their FluentUI library by using a custom made textbox and calendar component. https://github.com/microsoft/fluentui-blazor/blob/324f78b7f458c8d47cabfb1f9ddf7d574b772616/src/Core/Components/DateTime/FluentDatePicker.razor#L4

However there are ongoing issues in AspNetCore repository to fix behaviour of #340

https://github.com/dotnet/aspnetcore/issues/40660 & https://github.com/dotnet/aspnetcore/issues/43824

MarvinKlein1508 avatar Nov 23 '23 14:11 MarvinKlein1508

Can we remove the "clear" button from the standard control? An external custom button will do all required things...

LucaCris avatar Dec 06 '23 16:12 LucaCris

@LucaCris this isn't as simple as this. The clear button is being generated by the browser itself. To get the behaviour you'll want this component need to be rewritten as input type="text" and all the logic needs to be adjusted / added for this control. As well as a date picker.

MarvinKlein1508 avatar Dec 06 '23 16:12 MarvinKlein1508

@LucaCris this isn't as simple as this. The clear button is being generated by the browser itself. To get the behaviour you'll want this component need to be rewritten as input type="text" and all the logic needs to be adjusted / added for this control. As well as a date picker.

To completely rewrite a calendar control is out of scope here...

LucaCris avatar Dec 08 '23 09:12 LucaCris