DatePicker FocusIn not working on very first Page load

[Lazar Gosic]

Hi

I am experiencing a strange issue and don't know if it's a bug or expected behavior.

I extended SfDatePicker so I can overwrite OnAfterRender function and add a FocusIn, so that the element gets focused when it renders.

However, this does NOT work on the very first page load.

After the initial load, I can navigate to another page, come back, and FocusIn seems to be working from now on.

Any clue why it doesn't work on initial load?

I attached a sample App.
Steps to reproduce:
- Load Application by pressing F5
- DatePicker is not focused
- Expected behavior: DatePicker is focused
Current workaround:
- Load Application by pressing F5
- Navigate AWAY from page with DatePicker component
- Navigate to page with DatePicker component
- From now on it seems to be working 100% of the time

Any idea why this is happening? A bug or maybe I'm missing something?

Cheers,

Lazar

Attachment: BlazorTestApp_81f3313f.zip

[Berly Christopher]

Hi Lazar, 

  

Greetings from Syncfusion support. 

  

We will check and update the further details about the reported issue in two business days (23^rd November 2021). At the meanwhile, we suggest you to call the FocusAsync() method in the component’s Created event and let us know the results since FocusIn() method deprecated from the component.  

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FocusAsync  

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Lazar Gosic, 

  

Thanks for the patience. 

  

We can call the FocusAsync method with some interval by define it in the new function as mentioned in the below code example. 

  

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FocusAsync  

  

  public class MyDatePicker : SfDatePicker<DateTime?> 

    { 

        protected override async Task OnAfterRenderAsync(bool firstRender) 

        {         

            base.OnAfterRenderAsync(firstRender); 

            if (firstRender) 

            { 

                await Task.Delay(500); 

                await UpdateFocus(); 

            } 

        } 

        public async Task UpdateFocus() 

        { 

            await FocusAsync(); 

 

        } 

    } 

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorTestApp-2089323935  

  

Regards, 

Berly B.C