How to set focus to an SfButton in an SfDialog when the dialog first opens

[Tom]

I'm trying to set focus to an "OK" SfButton within an SfDialog when the dialog first appears. I've tried calling the OK button's FocusIn method in several events/places and have tried calling a Javascript method on the button element without success. The focus always seems to stay on the first component in the dialog. If you could provide an example of how to do this it would be appreciated. I'm using SF Blazor v18.3.0.51 and .Net 5 RC2. My razor file is attached.

Attachment: DateFormatDialog_1100c29f.7z

[Mohan Kumar Ramasamy]

Hi Tom, 

 

We have checked your reported query. We can achieve your requirement using JavaScript interop. Please refer below code snippets.  

 

 

<SfDialog Target='#target' Height='237px' Width='340px' IsModal='true' ShowCloseIcon='true' AllowDragging='true' EnableResize='false' 

          @ref='SfDialog' @bind-Visible='DialogVisible' CssClass='dialogboxmx'> 

    <DialogTemplates> 

        <Header> 

            <div style='display:flex; align-items:center; width: 100%; height: 20px; font-size: 13px; border: 0px;'>Date/Time Format </div> 

        </Header> 

        <Content> 

            <div class='font-mx defaults-mx' style='position:absolute; display:flex; align-items:center; left: -1px; bottom: 31px; width: calc(100% - 4px); height: 10px; border: 1px solid yellow;'> 

                <hr class='hr-mobius'> 

            </div> 

            <div class='font-mx defaults-mx' style='position:absolute; display:flex; align-items:center; right: 80px; bottom: 6px; width: 60px; height: 23px; border: 1px solid yellow;'> 

                <SfButton CssClass='button-mx' ID="@OkButtonId" Content='OK' IsPrimary='true' @ref='OK' @onclick='OK_Click' /> 

            </div> 

            <div class='font-mx defaults-mx' style='position:absolute; display:flex; align-items:center; right: 12px; bottom: 6px; width: 60px; height: 23px; border: 1px solid yellow;'> 

                <SfButton CssClass='button-mx' Content='Cancel' @ref='Cancel' @onclick='Cancel_Click' /> 

            </div> 

        </Content> 

    </DialogTemplates> 

    <DialogEvents Opened='@DialogOpened' Closed='@DialogClosed'></DialogEvents> 

</SfDialog> 

 

    @code{ 

 

        private string OkButtonId = "dialogok"; 

 

  private async Task DialogOpened(Syncfusion.Blazor.Popups.OpenEventArgs args) 

        { 

            args.PreventFocus = true; 

            await JsRuntime.InvokeVoidAsync("focusButton", OkButtonId); 

        } 

 

    } 

 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/160098/ze/DialogWithButton1430408737  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Tom]

Thanks, that works. Also, SfButton.FocusIn() works as well as long as you first include args.PreventFocus = true; which I wasn't doing. FocusIn() has the advantage of allowing you to avoid the use of the JavaScript and the button ID  (see snippet below).

  private async Task DialogOpened(Syncfusion.Blazor.Popups.OpenEventArgs args)

  {

    args.PreventFocus = true;

    await OK.FocusIn();

    return;

  }

[Mohan Kumar Ramasamy]

Hi Tom, 

 

Thanks for the update. We can achieve your requirement using FocusIn() method and we are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohan kumar R