Bug - dropdown scrollable bugs when having more then 7 items
Closed this issue · 3 comments
Describe the bug
A clear and concise description of what the bug is.
When you have a dropdown with 7 or more items, the dropdown will turn scrollable. But when clicking outside or inside the dropdown to close it, the whole list will be shown for a millisecond.
To Reproduce
Steps to reproduce the behavior and be very detailed
- Go to storybook
- Add more than 7 options
- Close it
- See error
Expected behavior
A clear and concise description of what you expected to happen.
Have the same styling when closing it
Screenshots
If applicable, add screenshots to help explain your problem.
Version of SDDS or which package
E.g 1.2.3 or @scania/theme-light v2.3.4
@scania/components 1.14.0
System information:
Please complete the following information, don't forget version
- Framework: Any
- Device: Desktop
- OS: macOS
- Browser Chrome
Screen.Recording.2021-11-15.at.10.21.40.mov
I took a quick look at this one. The issue is in max-height:90rem. When it is not set, but rather we use height: fit-content, then the upper issue is not present. However, that one removes the scrolling option - I think the root cause is how we add/remove the "is-open" class that controls the showing/hiding options dropdown. Synchronization of properties that change on this class addition/removal can be improved.
After some more investigation, there is an animation rules that is "too slow" in this case, causing it to flicker.