1. Home
  2. Forum
  3. Blazor
  4. SfTextBox.FocusIn() is not working on SfDialog

SfTextBox.FocusIn() is not working on SfDialog

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

14 Replies
AS ashimaz April 17, 2020 05:28 AM UTC

I am facing same issue ...

IS Indrajith Srinivasan Syncfusion Team April 17, 2020 11:02 AM UTC

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 


IS Indrajith Srinivasan Syncfusion Team April 30, 2020 03:41 PM UTC

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 


IS Indrajith Srinivasan Syncfusion Team May 14, 2020 04:02 PM UTC

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 


AO Andreas Oelke June 5, 2020 05:39 AM UTC

We are facing the same issue now.
When will this be fixed? The first week of June will be over today.

IS Indrajith Srinivasan Syncfusion Team June 5, 2020 11:42 AM UTC

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

HA Handi June 7, 2020 02:00 AM UTC

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

IS Indrajith Srinivasan Syncfusion Team June 8, 2020 12:12 PM UTC

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(); 
} 
 
 
 
Please let us know if the solution helps,

Regards, 
Indrajith 


HA Handi June 9, 2020 08:15 AM UTC

Hi Indrajith,

It works like a champ !

Thanks a lot.

Regards,
Handi Rusli

IS Indrajith Srinivasan Syncfusion Team June 9, 2020 03:28 PM UTC

Hi Handi,

Welcome,

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

Regards,
Indrajith

HA Hans January 1, 2022 10:15 AM UTC

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 


VJ Vinitha Jeyakumar Syncfusion Team January 3, 2022 07:42 AM UTC

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 


DQ Daniyal Qamer DQ April 19, 2024 08:02 PM UTC

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:


UD UdhayaKumar Duraisamy Syncfusion Team April 29, 2024 12:43 PM UTC

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


Loader.
Up arrow icon