Text is disappearing from the Autocomplete input when typing fast.

[vivanenko]

Text is disappearing from the Autocomplete input when typing fast.

Steps to reproduce the behaviour:

1. Go to https://demos.blazorbootstrap.com/autocomplete
2. Type fast any text in any autocomplete input

3. See this strange behaviour. The same bug is reproduced in my Blazor project

   • BlazorBootstrap: 1.10.3
   • Blazor Server
   • .NET Version: .NET 7

[gvreddy04]

@vivanenko Thank you for trying BlazorBootstrap components. What are your expectations from your testing team? How many characters does the user type in your case? Do you think the user will type that many characters in the search bar in real time?

[vivanenko]

@vivanenko Thank you for trying BlazorBootstrap components. What are your expectations from your testing team? How many characters does the user type in your case? Do you think the user will type that many characters in the search bar in real time?

In our typical use case a user enters one word (a name) in a second. Let's take "Daina" as an example. When I type it in less than a second the text is partially disappearing and appearing again with some delay. Sometimes the Autocomplete swallows characters so they are completely lost. Both issues confuse users.

[MarvinKlein1508]

For me this is also happening when typing in normal speed. I think the best way to fix this is to only search after a certain delay after the last keystroke and not on every keystroke.

[gvreddy04]

@vivanenko At this moment, we have a 300-millisecond delay. We will add a Delay parameter to configure the delay for the search.

[MarvinKlein1508]

@gvreddy04 what is the point of the delay in the first place? It works fine for me without any delay.

[gvreddy04]

@vivanenko @MarvinKlein1508 We should not remove the delay. There is a specific reason for the delay.

Here is the scenario: If a user is typing fast (i.e., 3-4 characters per second), you are making 3-4 calls to the API or database to filter the data. If you are simply filtering on the existing collection, which is already available, it will still not filter until there is a 300-millisecond delay in the next keystroke from the user. Same approach is used by all the AutoComplete components.

I'll investigate on the text disappearing.

[gvreddy04]

@vivanenko @MarvinKlein1508 Another option I can give you is the Debounce parameter. If it is not required in your case, you can set it to 0.

[MarvinKlein1508]

@vivanenko @MarvinKlein1508 Another option I can give you is the Debounce parameter. If it is not required in your case, you can set it to 0.

I would see a bool value here so get rid of the await in the first place when you don't need it. Speeds up the application by removing the state machine

[gvreddy04]

@vivanenko @MarvinKlein1508 We should not remove the delay. There is a specific reason for the delay.

Here is the scenario: If a user is typing fast (i.e., 3-4 characters per second), you are making 3-4 calls to the API or database to filter the data. If you are simply filtering on the existing collection, which is already available, it will still not filter until there is a 300-millisecond delay in the next keystroke from the user. Same approach is used by all the AutoComplete components.

I'll investigate on the text disappearing.

Video 1: Without debouncing 300 milliseconds, it will make more number of calls to the API as the user types in.

https://github.com/vikramlearning/blazorbootstrap/assets/2337067/81a70459-78ac-4f35-8608-a456d6bc8248

[gvreddy04]

@vivanenko @MarvinKlein1508 We should not remove the delay. There is a specific reason for the delay. Here is the scenario: If a user is typing fast (i.e., 3-4 characters per second), you are making 3-4 calls to the API or database to filter the data. If you are simply filtering on the existing collection, which is already available, it will still not filter until there is a 300-millisecond delay in the next keystroke from the user. Same approach is used by all the AutoComplete components. I'll investigate on the text disappearing.

Video 1: Without debouncing 300 milliseconds, it will make more number of calls to the API as the user types in.

blazorbootstrap_issue_407.mp4

Video 2: With default 300 milli seconds debouncing, it will make only one call to the API

https://github.com/vikramlearning/blazorbootstrap/assets/2337067/f076f8c9-da26-40b3-9b1f-84c98c316a00

[gvreddy04]

@vivanenko @MarvinKlein1508 Were you able to reproduce the issue at https://demos.blazorbootstrap.com/autocomplete?

If so, can you share a recording of how to reproduce it? I am currently unable to reproduce the issue myself.

[MarvinKlein1508]

yes you can reproduce this easily on demos. Will send you video soon.

[MarvinKlein1508]

Here you go. I was typing Bandita very fast

[gvreddy04]

@MarvinKlein1508 Thank you for your time.

[MarvinKlein1508]

@gvreddy04 I just took another look on it. This issue only happens for me in the demos. When I run both demo apps locally then it works fine for me.

[pdavisbdbc]

Is this still being reviewed? The issue does not happen locally, but it does happen in the Demo and when an application is deployed where latency between the client and the server is higher.

[danbopes]

I get the same issue