1. Home
  2. Forum
  3. Blazor
  4. SfTimePicker endless loop when changing value programatically from another event handler

SfTimePicker endless loop when changing value programatically from another event handler

Hi,

using latest Syncfusion components (18.3.0.40 in time of writing).
On a page I have two SfTimePicker instances where one of them uses others current value as its minimum and if the value of first time picker is higher than second timepicker, the second time picker gets its value changed to first timepicker value + 1 hour (to make sure its value is never below the first timepicker).

The issue is when I change value of first timepicker to be higher than second timepicker, event handler of second timepicker gets into endless loop! I have no clue whatsoever why this is happening...

Anyhow, I know it is a mouthful so here's the code and sample test project attached.

@page "/"

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" PlaceHolder="00:00" Step=30 Format="HH:mm" Value="@now" Min="@timePickerMinimum" Max="@timePickerMaximum" StrictMode="false">
    <TimePickerEvents TValue="DateTime?" ValueChange="(args) => OnFirstChange(args)"></TimePickerEvents>
</SfTimePicker>

<SfTimePicker TValue="DateTime?" PlaceHolder="00:00" Step=30 Format="HH:mm" Value="@secondNow" Min="@now" Max="@timePickerMaximum" StrictMode="false">
    <TimePickerEvents TValue="DateTime?" ValueChange="(args) => OnSecondChange(args)"></TimePickerEvents>
</SfTimePicker>

@code {
    private DateTime now = DateTime.Now;
    private DateTime secondNow = DateTime.Now;

    private DateTime timePickerMinimum = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 0, 0); // 7 AM
    private DateTime timePickerMaximum = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 0, 0); // 6 PM

    public void OnFirstChange(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        if (args.Value == null)
            return;

        now = (DateTime)args.Value;

        // Issue: Line below causes method OnSecondChange to go into endless loop
        if (secondNow < now)
        {
            secondNow = now.AddHours(1);
        }
    }

    public void OnSecondChange(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        if (args.Value == null)
            return;

        Console.WriteLine("Hello from OnSecondChange!");

        secondNow = (DateTime)args.Value;
    }
}

Attachment: Blazor_Date_App_2b564fda.zip

4 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team October 14, 2020 11:32 AM UTC

Hi Peder, 

Thanks for contacting Syncfusion support. 

We would like to inform you that the cause for the reported issue is you have updated the variable with one-way binding (Value property). We suggest you to use the two-way binding (bind-Value property), if component value has been changed, it will affect the all places where we bind the variable for the bind-value attribute. Here we have attached the modified sample below for your reference. 

<SfTimePicker TValue="DateTime" PlaceHolder="00:00" Step=30 Format="HH:mm" @bind-Value="@now" Min="@timePickerMinimum" Max="@timePickerMaximum" StrictMode="false"> 
    <TimePickerEvents TValue="DateTime" ValueChange="(args) => OnFirstChange(args)"></TimePickerEvents> 
</SfTimePicker> 
 
<SfTimePicker TValue="DateTime" PlaceHolder="00:00" Step=30 Format="HH:mm" @bind-Value="@secondNow" Min="@now" Max="@timePickerMaximum" StrictMode="false"> 
    <TimePickerEvents TValue="DateTime" ValueChange="(args) => OnSecondChange(args)"></TimePickerEvents> 
</SfTimePicker> 


 
Kindly apply the above suggestion in your application to get rid of the reported issue. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


PG Peder Guzova October 14, 2020 01:28 PM UTC

Dear Ponmani,

thank you for solution! Little background why we did as we did: having @bind-Value and ValueChange event handler is a little counter-intuitive since @bind-Value already has changed value when ValueChange fires which renders all logic we have in there useless (logic that decides if time should change or not). Reason we did one-way binding is to avoid that situation, also documentation does not mention anything about mixing two-way binding with dynamic.

I changed our logic and was able to adapt it to having value changed beforehand but what I as a developer was expecting is being able to control value flow using dynamic binding.

PM Ponmani Murugaiyan Syncfusion Team October 23, 2020 12:43 PM UTC

Hi Peder, 

Sorry for the inconvenience caused. 

Currently we are checking the reported query. We will check and update further details in 2 business days (October 27, 2020). We appreciate your patience until then. 

Regards, 
Ponmani M 


PM Ponmani Murugaiyan Syncfusion Team October 28, 2020 06:54 AM UTC

Hi Peder,   
  
Thanks for your patience.  
  
We have confirmed the reported issue as a bug in our end, the fix will be included in the upcoming patch release, which is expected to be rolled on November 11, 2020. We appreciate your patience until then   
  
You can track the status of the bug from the below feedback link. 
   
  
Regards,  
Ponmani M 
30

Marked as answer
Loader.
Up arrow icon