Rocss
commented
4 weeks ago When there is not enough space for the popover, the PlacementController class computes a max-width & max-height for it & applies it.
Due to css transition all here max-width and max-height are animated, resulting in the behaviour captured in the attached video, and in CCEX-115573.
Adding max-height 0s, max-width 0s, alongside the existing translate 0s, in the CSS rule seems to fix the issue, however, I am wondering if we would actually need to animate max-width & max-height somewhere, in some case which is not obvious to me.
If we actually do need it in the overlay API, maybe a more focused fix would be okay in the combobox.css file, where we remove max-width and max-height from the list of animated properties.
@adobe/swc-maintainers any thoughts on this?
Code of conduct
Impacted component(s)
sp-combobox
Expected behavior
Combobox should open smoothly and should not perform additional transitions/animations as a result of child rendering. Eventually all calculations should be done before the animations start?
Actual behavior
See attached recording
Screenshots
https://github.com/adobe/spectrum-web-components/assets/13311865/de94abd3-b63b-4169-b450-0997f73d20f2
What browsers are you seeing the problem in?
Chrome
How can we reproduce this issue?
I personally reproduced this issue in the storybook, but I tweaked the elements a bit so that I can position the Combobox on the bottom-right of the page. Also, this reproduces better when you have more options than what fits on the screen.
Sample code that illustrates the problem
No response
Logs taken while reproducing problem
Not reproducing when "Reduce motion" is toggled ON, so most probably something to do with CSS transitions.