Topic: Autocomplete error message on failed data request

ilya premium asked 10 months ago

Hi, I'm using your autocomplete component with asynchronous data loading and it works great! The only problem that bothers me is that there is no error message if the API endpoint is unavailable (for example, the API server is down or the wrong endpoint address is specified in the frontend). In this case, no error message is displayed and the loading spinner keeps spinning endlessly, which is confusing for the user. How can I make it so that in case of a failed data request a corresponding message is displayed?

Expected behavior

Error message is shown in case of failed data request.

Actual behavior

The loading spinner keeps spinning endlessly, no error message is shown.

Kamila Pieńkowska staff answered 10 months ago

You can hide the spinner by adding with JS display: none; to .autocomplete-loader.

Kamila Pieńkowska staff answered 10 months ago

You can use try.. catch syntax. I've prepared a snippet that shows you how:

With that, you can do whatever you want to communicate the problem. You can show a toast with information that the query didn't work, timeout to retry in a set amount of time, info below that an error occurs. In the example, I've shown you error info in the console.

ilya premium commented 10 months ago

Thanks! How can I hide the spinner on the right side of the autocomplete field?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.0.1
  • Device: Laptop
  • Browser: Firefox
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No