SfAutoComplete not loading suggestions when the Selected value is cleared using the close button at the end of control

[Unknown]

SfAutoComplete will load suggestions using onfiltering event, but when tries to select one value from the suggestion list and clear it using the close button at end of control; do the same for three times.   Then the autocomplete never shows suggestions again but onfiltering event is fired and data source value is being set.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Richy, 

Thanks for contacting Syncfusion support. 

We have checked your query of Autocomplete is not loading results after filtering three times. Unfortunately, we could not reproduce the issue and is working good at our end. Here we have attached the ensured sample and video demonstration. Please check the sample and if still persists, kindly share the below details. 

1. Code snippet of the control rendering part and its associated callbacks. 

2. Video which demonstrate the issue. 

3. If possible, try to reproduce the reported issue in the attached sample. 

Sample Link       : https://www.syncfusion.com/downloads/support/forum/158562/ze/AutoComplete_Filtering341353762 

Video Link          : https://www.syncfusion.com/downloads/support/forum/158562/ze/AutoComplete_Suggestion-959187 

Thanks, 

Jeyanth. 

[Unknown]

I'm using syncfusion package version 18.2.0.47.

Following are my code

                    <SfAutoComplete @ref="AutoCompleteObj" TValue="string" TItem="GroupedDiseaseViewModel" Value="@SelectedDisease?.SubDisease"

                                    Placeholder="Type the disease" Highlight=true DataSource="FilteredDiseaseList">

                        <AutoCompleteFieldSettings IconCss="Icon"

                                                   Text="@( nameof( GroupedDiseaseViewModel.SubDisease ) )"

                                                   Value="@( nameof( GroupedDiseaseViewModel.SubDisease ) )"

                                                   GroupBy="@nameof(GroupedDiseaseViewModel.Disease)">

                        </AutoCompleteFieldSettings>

                        <AutoCompleteEvents TValue="string" Filtering="OnFiltering" OnValueSelect="@onChange"></AutoCompleteEvents>

                    </SfAutoComplete>

        protected void OnFiltering(FilteringEventArgs args)

        {

                if (args.Text.Length > 2)

                {

                    FilteredDiseaseList = AllGroupedDiseaseLists?.Where(dis => dis.SubDisease.ToLowerInvariant().Contains(args.Text.ToLowerInvariant())).ToList();

                }

                this.StateHasChanged();

        }

        protected void onChange(Syncfusion.Blazor.DropDowns.SelectEventArgs args)

        {

                if (args != null && args.ItemData != null)

                {

                    var jsonInput = args.ItemData.ToString();

                    SelectedDisease = JsonConvert.DeserializeObject<GroupedDiseaseViewModel>(jsonInput);

                    DiseaseValue = SelectedDisease?.SubDisease;

                    StateHasChanged();

                }

        }

public GroupedDiseaseViewModel SelectedDisease { get; set; }

public class GroupedDiseaseViewModel

    {

        public int DiseaseId { get; set; }

        public string Disease { get; set; }

        public int? SubDiseaseId { get; set; }

        public string SubDisease { get; set; }

    }

By the way is there a way to get the close button event of autocomplete?

[Sureshkumar P]

Hi Richy, 

 

Thanks for your update. 

 

Based on your shared information with code example. We cannot able to replicate the reported issue from our end. please update the below details to proceed further.  

1.      if possible, please update the issue replication steps with pictorial or video representation. 

2.     If possible, please replicate the reported issue in our previously attached sample and revert us with detailed issue replication procedure. 

These details will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P 

[Unknown]

Hi, here a sample is attached to verify the issue.

if I clear the previously selected value of autocomplete using 'Backspace' key, it will load suggestions without issues; But when i try to clear the selected value using the clear button and start typing, it shows a loading around the clear button but not showing suggestions...

Attachment: BlazorApp3_616cdafd.rar

[Sureshkumar P]

Hi Richy, 

 

Thanks for your detailed information, 

 

Based on your shared information, we have validated the reported issue from our end. when remove the OnValueSelect event from your attached sample the issue is not replicated. So, can you please explain the exact usage requirement of your OnValueSelect event. We will provide exact solution as earlier as possible. 

 

Please find the modified code here: 

<div class="page-inner" id="pageinner"> 

    <p>Datasource Values</p> 

 

    <div class="row"> 

        <div class="col-12 mt-3 pt-3"> 

            <div class="inner-body mg-main"> 

                <SfAutoComplete @ref="TestAutoCompleteObj" TValue="string" TItem="GroupedDiseaseViewModel" Placeholder="Type the disease" Value="@SelectedDisease?.SubDisease" DataSource="FilteredDiseaseList"> 

                    <AutoCompleteFieldSettings GroupBy="Disease" Text="SubDisease" Value="SubDisease"></AutoCompleteFieldSettings> 

                    <AutoCompleteEvents TItem="GroupedDiseaseViewModel" TValue="String" Filtering="@OnTestFiltering" ></AutoCompleteEvents> 

                </SfAutoComplete> 

            </div> 

        </div> 

    </div> 

</div> 

 

@code { 

 

    public GroupedDiseaseViewModel SelectedDisease { get; set; } 

    SfAutoComplete<string, GroupedDiseaseViewModel> TestAutoCompleteObj; 

    public List<GroupedDiseaseViewModel> FilteredDiseaseList { get; set; } 

 

    protected async Task OnTestFiltering(FilteringEventArgs args) 

    { 

        if (args.Text.Length > 2) 

        { 

            List<GroupedDiseaseViewModel> result = await disservice.GetDiseaseDataAsync(); 

            FilteredDiseaseList = result?.Where(dis => dis.SubDisease.ToLowerInvariant().Contains(args.Text.ToLowerInvariant())).ToList(); 

        } 

    } 

 

    protected void OnTestChange(Syncfusion.Blazor.DropDowns.SelectEventArgs<GroupedDiseaseViewModel> args) 

    { 

        if (args != null && args.ItemData != null) 

        { 

            //var jsonInput = args.ItemData.ToString(); 

            //SelectedDisease = args.ItemData as GroupedDiseaseViewModel; 

            //StateHasChanged(); 

        } 

    } 

} 

 

 

 

Regards, 

Sureshkumar P 

[Unknown]

On the selection of a suggestion, i need to set the value of SelectedDisease.

I changed the control to Combobox and tried it works without issues.

Following is the code

But when I enabled filtering using the attribute "AllowFiltering=true ", find the same issue in Combobox also that no suggestion after clicking the clear button at end of control.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Richy, 

 

We would like to know you that ValueChange event will be triggered whenever a value is changed. In the event arguments, you can get the changed value. With the help of this, you can get the selected value. Please find the sample in the below link. 

 

Sample Link       : https://www.syncfusion.com/downloads/support/forum/158562/ze/Combobox54916734 

 

<div class="page-inner" id="pageinner"> 

    <p>Selected Value:</p><strong>@Value</strong> 

 

    <div class="row"> 

        <div class="col-12 mt-3 pt-3"> 

            <div class="inner-body mg-main"> 

                <SfAutoComplete @ref="TestAutoCompleteObj" TValue="string" TItem="GroupedDiseaseViewModel" Placeholder="Type the disease"  DataSource="FilteredDiseaseList"> 

                    <AutoCompleteFieldSettings GroupBy="Disease" Text="SubDisease" Value="SubDisease"></AutoCompleteFieldSettings> 

                    <AutoCompleteEvents TItem="GroupedDiseaseViewModel" TValue="String" Filtering="@OnTestFiltering" ValueChange="@OnTestChange"></AutoCompleteEvents> 

                </SfAutoComplete> 

            </div> 

        </div> 

    </div> 

</div> 

 

@code { 

 

    public string Value { get; set; } 

    public GroupedDiseaseViewModel SelectedDisease { get; set; } 

    SfAutoComplete<string, GroupedDiseaseViewModel> TestAutoCompleteObj; 

    public List<GroupedDiseaseViewModel> FilteredDiseaseList { get; set; } 

 

    protected async Task OnTestFiltering(FilteringEventArgs args) 

    { 

        if (args.Text.Length > 2) 

        { 

            List<GroupedDiseaseViewModel> result = await disservice.GetDiseaseDataAsync(); 

            FilteredDiseaseList = result?.Where(dis => dis.SubDisease.ToLowerInvariant().Contains(args.Text.ToLowerInvariant())).ToList(); 

        } 

    } 

 

    protected void OnTestChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GroupedDiseaseViewModel> args) 

    { 

        Value = args.Value; 

    } 

} 

 

 

Screenshot:


 

 

 

Regards, 

Jeyanth.