Clicking on an item and then outside resets the selected item

[Luca]

Hi,

I seem to have a problem with the autocomplete control, and I'm not sure if it's a bug or if I'm doing something wrong in the code.

This is the code I'm using. The Autocomplete control is inside a custom component that opens up a dialog to the user:

<SfAutoComplete AllowCustom="false" TValue="string" @bind-Value="@SelectedUserInFileStatusAutocomplete" TItem="ListUserViewData" cssClass="template" Placeholder="Seleziona un utente" DataSource="UserFileStatusAutocompleteData">

                    <AutoCompleteTemplates TItem="ListUserViewData">

                        <ItemTemplate>

                            <div class="e-list-wrapper e-list-multi-line e-list-avatar">

                                <Avatar Path="@context.ProfilePicId" Class="e-avatar e-avatar-circle" Size="20"></Avatar>

                                <span class="e-list-item-header">@context.Username</span>

                            </div>

                        </ItemTemplate>

                    </AutoCompleteTemplates>

                    <AutoCompleteFieldSettings Value="Username"></AutoCompleteFieldSettings>

           </SfAutoComplete>

Data structures: 

string SelectedUserInFileStatusAutocomplete;

ObservableCollection<ListUserViewData> UserAutocompleteData;

class ListUserViewData : ICloneable

    {

        public string Username { get; set; }

        public string UserId { get; set; }

        public string Description { get; set; }

        public string ProfilePicId { get; set; }

        public bool IsCreator { get; set; }

        public bool CanEdit { get; set; }

        public bool CanApprove { get; set; }

        public object Clone()

        {

            return this.MemberwiseClone();

        }

    }

As you can see, I set the "AllowCustom" property to false, because I need users to select a single valid item from the list. 
The list is populated correctly and shows the items as expected.

The bug I'm facing is that, when an user clicks on a suggested item from the autocomplete list, the value is correctly selected in the control, but after that, if the user clicks outside of the control/the control loses focus, then the textbox is cleared and the placeholder appears.
This does only happen if the user clicks on the suggestion. If the user types the complete item value, then the value is selected correctly and it stays there even if the user clicks outside and changes focus. 
In both cases, custom values are cleared out (but this is correct and working fine).
Thank you for your support. 

[Ponmani Murugaiyan]

Hi Luca, 

Thanks for contacting Syncfusion support. 

Query: The bug I'm facing is that, when an user clicks on a suggested item from the autocomplete list, the value is correctly selected in the control, but after that, if the user clicks outside of the control/the control loses focus, then the textbox is cleared and the placeholder appears. 

We have validated your reported query. But unfortunately, the reported issue is not replicated in our end. If any of the suggested items get selected it is maintained in the input as expected even the user click outside of the control or the control loses focus the textbox maintains the selected value. Please find the ensured sample and video demonstration below for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Autocomplete1323234618  

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_4-11-2020_5.50.12_PM.mp4-1588664449  

Kindly check with the above sample. If we misunderstood the query, please revert us with the below details. 

1. Video demonstration for issue replicating procedure.
2. If possible  try to replicate the issue in the provided sample.

The above requested details will help us to provide you the solution at earliest. 

Regards, 

Ponmani M 

[Luca]

Thank you for your answer. I've seen the video, you did not misunderstood, that's exactly what I'm talking about!

Your example works also on my end. 
I've tried to replicate the issue using the same template I use on my project on your example, but it's working there.

So, I'm not sure what's happening on my end, but I'll try to investigate it even more. 
Thank you for your support.

[Luca]

Here's a video of the problem I'm facing. Right now, I don't have any clue on what would cause it...

Again, if I click outside or switch focus with the tab key, the text is cleared out. If I write down the entire suggestion, then it remains.
What is curious is that after typing out the complete suggestion, it remained. After that, I clicked on the 'x' to clear the suggestion, and then clicked again to the suggestion and it remained. This is the only instance where clicking on a suggestion worked correctly. 

Attachment: problem_9c75539c.zip

[Luca]

Hi,

After a few days of investigation, I was able to reproduce the issue on a project based on your example.

I've modified it to have a similar structure to my project. 

The main difference is that I'm fetching the data from a local api, I don't use a predefined data structure.

Thing is, this seems like a very strange bug and its behaviour is quite undefined: sometimes it happens, sometimes it works fine.

Here are some steps to follow that reproduce the issue on my end: 

1) Set breakpoint on line 15 of ApiController.cs (i know this is very strange, but still...)

2) Compile and run the application

3) Now it will stop on the breakpoint two times, press f10 (skip over) very fast. You should press it four times to continue the page loading.

4) Page will load. Press the X of the red evaluation.

5) now you can type for example u, to select an user. If you click outside, the name disappears.

This bug is very inconsistent in this example. Sometimes I get it by doing nothing, other times I need to reload the page multiple times. 

So, if you got the component working on the first try, please try at least a few more times to refresh and press f10 to step over the lines after the breakpoint.

If I don't set up a breakpoint there, the control works fine.

The problem is, in my application, the control never works as intended, even in release mode or without any breakpoint. 

ps: if you get an exception using httpclient, you will probably need to change the baseaddress on Startup.cs on line 39.

Attached you will find the example code and a video (bug.mkv) showing the steps and the result.

Attachment: code_and_video_ba68388f.zip

[Ponmani Murugaiyan]

Hi Luca, 

Thanks for the detailed information. 

We have checked your provided video and sample. But unfortunately, the dropdown throws no records found in your sample. Please find the video demonstration for your reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_11-11-2020_6.59.00_PM.mp4-812746310  

 

We have prepared sample with data from a local api. Please find below for your reference.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Autocomplete-517395595  

 

We request you to check with the above sample and try to replicate the issue with the above provided sample, which helps us to provide the solution at earliest. 

Regards, 

Ponmani M