Flickering dropdown when toggling it

brianvoe / slim-select

Slim advanced select dropdown

http://slimselectjs.com

MIT License

1.03k stars 195 forks source link

Flickering dropdown when toggling it #505

Closed cuongle-hdwebsoft closed 7 months ago

cuongle-hdwebsoft commented 8 months ago

Describe the bug The dropdown animation is flickering when it collapses.

Step to reproduce

Try to scroll down to make Select close to bottom screen
Open Select, then it will change listbox from the bottom to top automatically
Close select, and you will see the bug here. The animation seems to be broken or something that I don't understand that behavior

Screenshots

https://github.com/brianvoe/slim-select/assets/102006695/4d1ef9e2-f695-44aa-b032-f9978b219921

brianvoe commented 8 months ago

I dont see any flickering in your video.

cuongle-hdwebsoft commented 8 months ago

Ok let me reproduce this issue in codesandbox:

https://github.com/brianvoe/slim-select/assets/102006695/9d25a818-dc63-42b6-97de-aa2eb58942d6

I hope this makes more clear for you

brianvoe commented 8 months ago

There might be something there but I just dont really see an issue. If you have a suggestion for a fix I can always look at a pr.

cuongle-hdwebsoft commented 8 months ago

https://github.com/brianvoe/slim-select/assets/102006695/92114b99-fa69-4bbc-9e7b-709834fc0677

CleanShot 2024-01-03 at 07 19 15@2x

I think you should try to look at carefully the difference animation when dropdown at the bottom and at the top. It seems like it starts its animation from the red line and then disappears.

Expected result: It should collapse smoothly, just change the height of the dropdown and do not act the animation like the video.

I actually see different animations here https://github.com/brianvoe/slim-select/assets/102006695/58024e35-a48b-4e87-abb4-81874679d82f