Strange operation of the SfTextBox

[jose luis barajas]

Hi

1]

I have the following code when I use a control of type sftextbox to search for information, when the enter key is pressed

   <div class="col-sm-6">

            <label>Buscar</label>

            <SfTextBox Placeholder="Buscar" @bind-Value="@buscarWorks" @onkeypress="@KeyPressHandler"></SfTextBox>

   </div>

Please check delay for one second.

if I don't put this delay of one second, the component doesn't give me the updated value !!!

is it a bug or is it wrong in the code? This is because the method declaration is asynchronous?

 private async Task KeyPressHandler(KeyboardEventArgs args) 

    { 

        if (args.Key == "Enter") 

        {

            await Task.Delay(1000);

            if (buscarWorks.Trim() == "")

            {

                var pid = await localStorage.GetItemAsync<string>("pid");

                await CargarProyectos(Convert.ToInt32(pid));

                return;

            }

            WorkModel search = new WorkModel();

            search.TXT_SEARCH = buscarWorks.Trim();

            search.STATUS = "";

            var data = await codebagService.GetAllWithSearch(search);

            if (data != null)

            {

                treeData = data.ToList();

            }

        } 

    } 

2]

I also want to ask you, in the declaration of the property,

public string buscarWorks { get; set; } = "";

 if I do not initialize the property it in the declaration, 

when calling the KeyPressHandler event, the value typed in the text box cannot be obtained?

If I delcared this

public string buscarWorks { get; set; }

Not works!

Thank you and I await your kind response!

[Vignesh Srinivasan]

Hi jose, 

 

Query 1 : 

 

In sftextbox component, bind-Value gets updated only when the input loses focus or it is  blurred, this is the component behavior. If you want to get the value while tying, you can get it from oninput event. Please find the code sample below.  

 

Code Snippet: 

 

<div class="col-sm-6"> 

    <label>Buscar</label> 

    <SfTextBox Placeholder="Buscar" @bind-Value="@buscarWorks" @onkeypress="@KeyPressHandler" @oninput="@OnTyping"></SfTextBox> 

</div> 

 

private void OnTyping(Microsoft.AspNetCore.Components.ChangeEventArgs args) 

    { 

        this.buscarWorks = args.Value.ToString(); 

    } 

 

So, as per your mentioned code you can use Task.Delay() to achieve you requirement. Else please share your scenario we will check and provide alternate solution for your requirement.  

 

Query 2 : 

 

As explained above since the value get updated only on the focus loss, so buscarWorks remains null without initialization. 

  

Regards, 

 

Vignesh Srinivasan. 

[David]

Is there really no way to use ' @bind-value:event="oninput" ' to handle this? 

If this is the case then it seems that binding is not usable if we need to check for enter or do some other processing on each key press. That is very disappointing. 

Also, would it be better to use @onkeyup instead of @onkeypress so that we are sure the value has been saved before that event gets triggered?

[Ponmani Murugaiyan]

Hi David, 

 

Currently we are checking the reported query in our end. We will update further details in 2 business days (July 8, 2021). We appreciate your patience until then. 

 

Regards, 

Ponmani M 

[Ponmani Murugaiyan]

Hi David, 

Thanks for your patience. 

We have considered the reported requirement “Provide support for bind value event in TextBox component” as feature request in our end. The support will provided in any of the upcoming patch release. If you have more specifications / suggestions on the request for the feature, you can add it to the portal as a comment. 

You can track the status using the below feedback link:  https://www.syncfusion.com/feedback/26863/ 

Regards, 

Ponmani M 

[Pascal Botzke]

Hi,

I had a similar problem and found following, which may help:

https://stackoverflow.com/questions/63861068/blazor-how-can-i-trigger-the-enter-key-event-to-action-a-button-function

So maybe changing the outer <div> to a <form> and using the "onsubmit"-Event on the form.

I hope, this helps.

Regards,
Pascal

[Sureshkumar P]

Hi Pascal,

Thanks for your suggestion.

Regards,

Sureshkumar P