Is there a way to implement ShowSuggestionsOnFocus on SfAutocomplete for Blazor

[Ben Junior]

It would be nice and very helpful if there were a way to open the popup when the SfAutoComplete get focus and also close it if the users focus out without making a selection. There is an example for xamarim but could not find one for Blazor.

[Kokila Poovendran]

Hi Ben Junior,

Greetings from Syncfusion Support!

Thank you for reaching out to us with your query about implementing ShowSuggestionsOnFocus in SfAutocomplete for Blazor. We appreciate your interest in our components and are happy to assist you.

To achieve the desired behavior of showing suggestions when the SfAutoComplete gets focus and closing the popup if the user focuses out without making a selection, you can use the Focus event. We have prepared a sample based on your requirements. Please refer to the code snippet below:

<SfAutoComplete @ref="AutoCompleteObj" TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">

    <AutoCompleteFieldSettings Value="Name" />

    <AutoCompleteEvents TItem="Country" TValue="string" Focus="@FocusHandler"></AutoCompleteEvents>

</SfAutoComplete>

 

@code {

    SfAutoComplete<string, Country> AutoCompleteObj;

 

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

 

    List<Country> LocalData = new List<Country> {

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

        new Country() { Name = "Denmark", Code = "DK" }

    };

 

    private void FocusHandler(Object args)

    {

        AutoCompleteObj.ShowPopupAsync();

    }

}

 

Sample: https://blazorplayground.syncfusion.com/BjhzjCiaqlbAeBHk

In the provided code snippet, the Focus event is used to call the ShowPopupAsync method, ensuring that the suggestions are displayed when the SfAutoComplete gets focus.

If you have any further concerns or questions, please feel free to let us know. We are here to help!

Autocomplete Events Documentation: https://blazor.syncfusion.com/documentation/autocomplete/events#focus

Regards,
Kokila Poovendran.