Cant bring focus on Textbox in SFGrid template Column

[Syam Pillai]

I have a SFGrid which has a Template column which hold a SFTextbox. However i am not able to bring focus to the textbox. When try to bring focus to the Textbox by clicking the Textbox with mouse, the focus comes and goes off. To type i have to keep the mouse pressed in the textbox and type. Please find my code below:

 <GridColumn AllowEditing="true" Field=@nameof(Web.Service.Model.RFQItem.UnitPrice) HeaderText="Unit Price">

                            <Template>

                                @{

                                    var itemInfo = (context as Web.Service.Model.RFQItem);

                                    <div @onkeydown:stopPropagation="true">

                                        <Syncfusion.Blazor.Inputs.SfTextBox Placeholder="0.00" @bind-value="itemInfo.UnitPrice" />

                                    </div>

                                }

                            </Template>

                        </GridColumn>

Attachment: QuotationItems_609071e9.zip

[Vignesh Natarajan]

Hi Syam,  

 

Thanks for contacting Syncfusion support.  

 

Query: “However i am not able to bring focus to the textbox. When try to bring focus to the Textbox by clicking the Textbox with mouse, the focus comes and goes off” 

 

We are able to reproduce the reported issue at our end also. we suggest you to overcome the reported issue by using stoppropagation for Native onclick event for the textbox parent element. Refer the below code example.  

 

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"> 

    <Template> 

        @{ 

            var itemInfo = (context as Order); 

            <div @onclick:stopPropagation="true" @onkeydown:stopPropagation="true"> 

                <Syncfusion.Blazor.Inputs.SfTextBox Placeholder="0.00" @bind-value="itemInfo.Freight" /> 

            </div> 

        } 

    </Template> 

</GridColumn> 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Syam Pillai]

Worked like a charm. Thank you and really appreciate the quick response

[Vignesh Natarajan]

Hi Syam,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Ryan Tomko]

I'm having this problem in version 25.1.35 in the HeaderTemplate:

<GridColumn Field=@nameof(Order.Mawb) Width="150px">

    <HeaderTemplate>

        @{

            <div class="d-flex" @onclick:stopPropagation=true>

                <SfTextBox @bind-Value=HeaderMAWB Placeholder="MAWB" />

                <SfButton IconCss="e-icons e-chevron-down-fill text-white" CssClass="e-small" OnClick="CopyMAWB" title="Copy AWB down"></SfButton>

            </div>

            <div>M.AWB</div>

        }

    </HeaderTemplate>

</GridColumn>

If I use onclick:stopPropagation then I can click and get input focus on the textbox, but when I type no letters appear in the textbox - perhaps the keystrokes are being taken by the header cell? Nothing shows in the textbox.

If I don't use onclick:stopPropagation then the textbox gets input focus on mouse down but then when I release the mouse button the focus jumps to the column header cell.  So then I can't even try to type into the textbox.

Is this a bug, or is there a work around?

[Prathap Senthil]

Hi Ryan,

We have confirmed this is an issue and logged a defect report titled  ‘Textbox in HeaderTemplate Doesn't Accept Input and Loses Focus After Mouse Click’  This fix will be included in our weekly patch release, which is expected to be rolled out on November  26th , 2024.You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
  

Textbox in headertemplate doesn't accept input and loses focus after mouse click in Blazor | Feedback Portal

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

We will get back to you once the release is rolled out. Until then we appreciate your patience.

Note :In the meantime, please refer to the workaround solution below for solving the issue with the @onclick:stopPropagation="true" &  @onkeydown:stopPropagation="true" attribute in the <div> element within the Template. Please see the code snippet and sample below for reference

    <GridColumn Field="@nameof(OrderData.CustomerID)" HeaderText="Customer ID" Width="100">

       <HeaderTemplate>

           @{

               <div @onclick:stopPropagation="true"   @onkeydown:stopPropagation="true">

                   <SfTextBox @bind-Value=HeaderMAWB Placeholder="MAWB" />

 

               </div>

           }

       </HeaderTemplate>

   </GridColumn>

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

Regards,

Prathap S

[Prathap Senthil]

Sorry for the inconvenience caused,

The reported issue was fixed but we were unable to include this fix in today's patch release. However, we want to assure you that the fix will be included in our weekly patch release, scheduled for on or before December 10th, 2024. We appreciate your patience and understanding in the meantime. Thank you.

Until then we appreciate your patience.

[Vignesh Natarajan]

Sorry for the inconvenience caused.

We have tried to include the fix in our source level, but since the reported query occur in HeaderTemplate with custom component. Also including this in our source affects the default functionality of sorting, filtering or column menu functionality of that particular column. So we request you to achieve your requirement using the solution provided in our previous update.

Please refer to the sample level solution below for solving the issue with the @onclick:stopPropagation="true" &  @onkeydown:stopPropagation="true" attribute in the <div> element within the Template. Please see the code snippet and sample below for reference

    <GridColumn Field="@nameof(OrderData.CustomerID)" HeaderText="Customer ID" Width="100">

       <HeaderTemplate>

           @{

<div @onclick:stopPropagation="true"   @onkeydown:stopPropagation="true">

                   <SfTextBox @bind-Value=HeaderMAWB Placeholder="MAWB" />

               </div>

           }

       </HeaderTemplate>

   </GridColumn>

Sample: https://blazorplayground.syncfusion.com/embed/LDVpCsDnUGsnXpsn?

[Prathap Senthil]

Thanks for your patience,

We regret to inform you that although we attempted to fix the issue at the source level, we encountered some breaking issues, making a source-level fix not feasible. Therefore, we recommend using the previously provided sample-level solution to achieve your requirements. Thank you for your understanding.