TextBox not work properly when is placed into toolbar item template

[Maurizio Meloni]

Hello,

I noticed that when i put a textbox component inside a toolbar item template, it lost focus just when you select it, not letting you write inside the text area.

It works only if you keep pressing the mouse on the component and write in the meantimes.

<ToolbarItem  Width="300px">
            <Template>
                <div style="height: 46px; line-height: 23px; min-width: 300px;">
                    <div style="text-align: center;">
                       <SfTextBox @bind-Value="inputText"></SfTextBox>
                    </div>
                    <div class="text-child" style="font-size: 14px;">Tickets Type</div>
                </div>
            </Template>
        </ToolbarItem>

Please let me know if is possible to fix this..

thank you very much

best regards

[Sevvandhi Nagulan]

Hi Maurizio, 

We are currently validating the reported issue and we will update further details on or before of 24th August,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Sevvandhi Nagulan]

Hi Maurizio,  

Thanks for using Syncfusion Products.  

We have validated your reported query "TextBox not work properly when is placed into toolbar item template" and let you know that you have missed to define Type as Input. We suggest you to define the Type property as Input in ToolbarItem tag to resolve the reported issue. For the same we have modified the sample which can be downloaded from the following link.  

Sample: https://www.syncfusion.com/downloads/support/forum/168206/ze/FocusIssue380431226  

UG: https://blazor.syncfusion.com/documentation/toolbar/item-configuration#type   

Index.razor:   

<EditForm Model="modal">  

    <SfToolbar>  

        <ToolbarItems>  

            <ToolbarItem Width="300px" Type="ItemType.Input">  

                <Template>  

                    <div style="height: 46px; line-height: 23px; min-width: 300px;">  

                        <div style="text-align: center;">  

                            @*<InputText @bind-Value="modal.textVal"></InputText>*@  

                            <SfTextBox @bind-Value="inputText"></SfTextBox>  

                        </div>  

                        <div class="text-child" style="font-size: 14px;">Tickets Type</div>  

                    </div>  

                </Template>  

            </ToolbarItem>  

        </ToolbarItems>  

    </SfToolbar>  

</EditForm>  

   

Kindly try the above sample and let us know if you have any concerns.  

   

Regards,  

Sevvandhi N 

[Maurizio Meloni]

Hello!

Thanks now it works perfectly.

Sorry for my mistake.

thank you very much!

Maurizio

[Prince Oliver]

Hi Maurizio, 

Most welcome. We are glad that the solution resolved the issue in your end. 

Regards, 

Prince