Custom Text not cleared after item selection

Question

Hi, I want to submit a item via the enter key or on item selection.

If I do this with custom text and submit it, the text is cleared as expected.

If I select one from the autocomplete list the item isnt cleared.

<SfAutoComplete TValue="string"

TItem="string"

DataSource="_itemSuggestions"

AllowCustom="true"

@bind-Value="_itemInput"

@onkeypress="OnItemInputKeyDown"

EnableVirtualization="true"

Enabled="@(_itemSuggestions != null)">

@context.ApplyCase(LetterCasing.Title)

</ItemTemplate>

</AutoCompleteTemplates>

</SfAutoComplete>

@code {

private IEnumerable<string> _itemSuggestions;

private string _itemInput;

protected override void OnInitialized()

{

_itemSuggestions = new List<string> { "Football", "Badminton", "Cricket", "Football", "Golf", "Hockey", "Rugby" };

}

private async Task OnSuggestedItemSelected(SelectEventArgs<string> e)

{

if (!string.IsNullOrWhiteSpace(e.ItemData))

{

await AddItemToList(e.ItemData);

_itemInput = String.Empty;

}

private Task AddItemToList(string eItemData)

{

//Add item to list

Console.WriteLine($"Add item: {eItemData}");

return Task.CompletedTask;

}

private async Task OnItemInputKeyDown(KeyboardEventArgs e)

{

if ((e.Code is "Enter" or "NumpadEnter") && !string.IsNullOrWhiteSpace(_itemInput))

{

await AddItemToList(_itemInput);

_itemInput = String.Empty;

}

Thanks in advance.

Sevvandhi Nagulan · Accepted Answer

Hi Perter, 

By default, if you are entering the text in the AutoComplete component then suggestion will be shown based on the entered text. As we mentioned earlier, args.Cancel in the Select event will restrict the value selection but it will not clear the value from the input of the component. If you want to remove the typed character from the input, we suggest you to call ClearAsync() method through component instance as mentioned in the below code example. 





    public async Task OnSelect(SelectEventArgs<Countries> args) 
    { 
        args.Cancel = true; 
        this.autoObj.ClearAsync(); 
    } 

Regards, 
Sevvandhi N.

Sevvandhi Nagulan · Answer

Hi Perter, 


Greetings from Syncfusion support. 


We checked your query. If you want to clear the value, then prevent the value using cancel property in the select event argument. Refer the following code. 





private async Task OnSuggestedItemSelected(SelectEventArgs<string> e) 
 
    { 
 
        if (!string.IsNullOrWhiteSpace(e.ItemData)) 
 
        { 
 
            //await AddItemToList(e.ItemData); 
 
            e.Cancel = true; 
 
            //_itemInput = String.Empty; 
 
        } 
 
    } 


Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N

perter-muller · Answer

Hello,thanks for the quick reply.I tried your suggestion, but unfortunately it still does not work for me.If I enter "cri" and select the "Cricket" suggestion the text "cri" still remains in the text field.This is my current code: private void OnSuggestedItemSelected(SelectEventArgs e)    {        if (!string.IsNullOrWhiteSpace(e.ItemData))        {            Console.WriteLine($"Add item: {e.ItemData}");            e.Cancel = true;        }    }