Autocomplete field does not work [TWE 1.1.0]

[AlJoff]

The first time I enter text into a field with autocomplete and select a value from the dropdown list, autocomplete stops working properly.
After the first value selection, the dropdown list becomes invisible (you can see it in the video) and overlaps other interface elements. Also, when clicking on the field with autocomplete again, the dropdown list does not open.

I don't understand why this is broken. This is a project from the Tailwind Elements v 1.1.0 documentation, meaning I have not changed the source code.

2024-05-05.03-17-52.mp4

Help please as I want to use a field with autocomplete in my student term paper

[juujisai]

I do not see the issue for the 1.1.0 version - checkout this snippet: https://tw-elements.com/snippets/tailwind/b-cylwik/6092439#html-tab-view.

Try creating a new app and see if the issue is still there.

[AlJoff]

This is the new project (app) from the documentation. I didn't change anything and ran it as is.
I followed all the steps from: https://tw-elements.com/docs/standard/getting-started/local-installation/

[AlJoff]

What am I doing wrong? Here's the full video from Local installation TW 1.1.0.
https://www.youtube.com/watch?v=36bhRALOHfE

[Pahomk]

This is a bug in the Tailwind Elements framework.
Tailwind Elements such as Autocomplete will NOT work when Windows animations are disabled.

You must have Windows animations enabled. Otherwise, Tailwind Elements will not work properly. This applies to any web site whose user interface is built on Tailwind Elements, not just your local projects.

Enable Windows animations and see if the problem has been resolved.

To enable Windows animations follow these steps:

1. Enable all visual effects:
   Go to: Settings -> System -> Advanced system settings -> Perfomance - Settings... -> Visual Effects. Set "Let Windows choose what's best for my computer".
   = OR =
   Press Win+R and paste "SystemPropertiesAdvanced" and Perfomance - Settings... -> Visual Effects. Set "Let Windows choose what's best for my computer".
   
   

2. Enable animations
   Go to: Settings -> Ease of Access -> Display -> Show animations in Windows - Turn ON

After that the user interface built on Tailwind Elements will work without errors.

[AlJoff]

No way... I've been puzzling over it for 3 days....
ITS WORKS !!!

What about if, suddenly, someone uses TWE in real projects (not for studying)? So if a real site uses the TWE framework and the user has animations disabled, the UI will be broken?

[juujisai]

Thanks, we'll check our components for the motion-reduce cases