SfTextBox.FocusIn() is not working on SfDialog

[Handi]

Dear Syncfusion Support,

<code>

<SfDialog @ref="oDialog"

          ShowCloseIcon="true"

          IsModal="true"

          @bind-Visible="DialogVisible"

          >

    <DialogEvents Opened="Opened"/>

    <DialogTemplates>

        <Header>

            Dialog Test

        </Header>

        <Content>

            <div class="container">

                <div class="row">

                    <div class="col-md-12">

                        <SfTextBox @ref="TxtBox"/>

                    </div>

                </div>

            </div>

        </Content>

    </DialogTemplates>

</SfDialog>

<SfButton OnClick="OnClickButton">Show Dialog</SfButton>

@code {

    SfDialog oDialog;

    SfTextBox TxtBox { get; set; }

    bool DialogVisible { get; set; } = false;

    void Opened(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        TxtBox.FocusIn();

    }

    void OnClickButton(MouseEventArgs args)

    {

        oDialog.Show(true);

    }

}

</code>

What I am trying to do is to get focus on textbox when dialog is opened ... Is there anything wrong with my code ? Please let me know, thanks.

Regards,

Handi Rusli

[ashimaz]

I am facing same issue ...

[Indrajith Srinivasan]

Hi Handi, 

 

Good day to you, 

 

We have validated the reported query and able to reproduce the reported issue from our end and we have considered “Textbox is not focused when placed inside dialog” as a bug from our end and logged the report for the same and the fix will be included with our patch release on the end of April 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13555/ 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Handi,

Sorry for the inconvenience caused,

We couldn't incude the fix with our patch release in the end of April due to complexity in fixing the issue from our end. We will include the fix with our 2020 Volume 1 SP 1 release.

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Handi,

We deeply regret for the inconvenience caused, 

 

We still couldn't include the fix with our Volume 1 SP1 release due to complexity in resolving the reported issue, we have planned to include the fix with our patch release on the first week of June.

Regards,  

Indrajith 

[Andreas Oelke]

We are facing the same issue now.

When will this be fixed? The first week of June will be over today.

[Indrajith Srinivasan]

Hi Handi / Andreas,

Thanks for your patience,

We have resolved the issue “Dialog content input elements is not focused” with SfDialog and the fix is available with the Nuget package version 18.1.54.

Feedback link: https://www.syncfusion.com/feedback/13555/ 

 

Can you please upgrade your package to this version to resolve the issue from your end? 

Regards,
Indrajith

[Handi]

Hi Indrajith,

Still not working as expected, It always focus on the first object in Dialog.

Here is the example code (I change a little bit from my previous code) :

@page "/test"

<SfDialog @ref="oDialog"

          ShowCloseIcon="true"

          IsModal="true"

          @bind-Visible="DialogVisible">

    <DialogEvents Opened="Opened" />

    <DialogTemplates>

        <Header>

            Dialog Test

        </Header>

        <Content>

            <div class="container">

                <div class="row">

                    <div class="col-md-12">

                        <SfTextBox @ref="TxtBox1"

                                   Placeholder="Text Box Number One"

                                   />

                    </div>

                </div>

                <div class="row">

                    <div class="col-md-12">

                        <SfTextBox @ref="TxtBox2"

                                   Placeholder="Text Box Number Two"

                                   />

                    </div>

                </div>

            </div>

        </Content>

    </DialogTemplates>

</SfDialog>

<SfButton OnClick="OnClickButton">Show Dialog</SfButton>

@code {

    SfDialog oDialog;

    SfTextBox TxtBox1 { get; set; }

    SfTextBox TxtBox2 { get; set; }

    bool DialogVisible { get; set; } = false;

    void Opened(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        //Focus should be in Text Box Number Two (Not working as expected)

        TxtBox2.FocusIn();

    }

    void OnClickButton(MouseEventArgs args)

    {

        oDialog.Show(true);

    }

}

I'm using version 18.1.0.55 from Nuget

Regards,

Handi Rusli

[Indrajith Srinivasan]

Hi Handi,

Good day to you, 

 

We have validated your reported query. By default the SfDialog focus the first textbox rendered, hence the TxtBox2.FocusIn() doesn’t work. In order to resolve this, you need to enable the PreventFocus in the OpenEventArgs to prevent the focus action with dialog. Below are the code block changes for focusing the desired textboxes.

Code blocks: 

 

void Opened(Syncfusion.Blazor.Popups.OpenEventArgs args) 

{ 

    //Prevent default SfDialog focus. 

    args.PreventFocus = true; 

    //Focus should be in Text Box Number Two (Not working as expected) 

    TxtBox2.FocusIn(); 

} 

 

 

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.OpenEventArgs.html#Syncfusion_Blazor_Popups_OpenEventArgs_PreventFocus 

 

Please let us know if the solution helps,

Regards, 

Indrajith 

[Handi]

Hi Indrajith,

It works like a champ !

Thanks a lot.

Regards,

Handi Rusli

[Indrajith Srinivasan]

Hi Handi,

Welcome,

We are glad that your reported issue is resolved. Please let us know if you need any further assistance.

Regards,
Indrajith

[Hans]

Dear support! 

I have the opposite challenge. I have one textbox in a dialog. 

How can I make sure there is no focus on the textbox initially? 

Hans 

[Vinitha Jeyakumar]

Hi Hans, 

 

 

Your requirement to prevent the initial focus on the textbox inside the dialog can be achieved by using the opened event of the dialog, where we can set the argument preventFocus to true. 

 

Code snippet: 

<SfDialog @ref="oDialog" 

          ShowCloseIcon="true" 

          IsModal="true" 

          @bind-Visible="DialogVisible"> 

    <DialogEvents Opened="Opened" /> 

    <DialogTemplates> 

        <Header> 

            Dialog Test 

        </Header> 

        <Content> 

            <div class="container"> 

                <div class="row"> 

                    <div class="col-md-12"> 

                        <SfTextBox @ref="TxtBox" /> 

                    </div> 

                </div> 

            </div> 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

<SfButton OnClick="OnClickButton">Show Dialog</SfButton> 

 

@code { 

    SfDialog oDialog; 

    SfTextBox TxtBox { get; set; } 

    bool DialogVisible { get; set; } = false; 

 

    void Opened(Syncfusion.Blazor.Popups.OpenEventArgs args) 

    { 

        args.PreventFocus = true; 

    } 

 

    void OnClickButton(MouseEventArgs args) 

    { 

        oDialog.Show(true); 

    } 

} 

 

Regards, 

Vinitha 

[Daniyal Qamer DQ]

Hi,

I am facing problem: I am not able to input into my sftextbox which is define withing sfdialog how can i fix this.
here is my code:

[UdhayaKumar Duraisamy]

Hi Daniyal Qamer DQ,

We have validated the reported query on our end, but unfortunately, we were unable to reproduce the reported issue as per your scenario. We have also shared a sample for your reference. In order to assist us in identifying the problem and provide a better solution, we kindly request that you provide additional details about the issue, as mentioned below:

1. A simple, runnable sample that illustrates the issue you are experiencing (or modify the shared sample as per your scenario).
2. Issue replication steps.
3. A video illustration of the issue.

Sample: https://blazorplayground.syncfusion.com/embed/hjhfjzVOpewpeTWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5 

Regards,

Udhaya Kumar D