[vwc-slider] inside initially closed [vwc-expansion-panel] trapped in desynchronized state

[k-paxian]

Describe the bug

[vwc-slider] element when being initially closed inside [vwc-expansion-panel] is trapped in desynchronized state when
opening the panel by clicking it.

To Reproduce
Steps to reproduce the behavior:

1. Put a configured slider element with certain value set inside initially closed vwc-expansion-panel
2. Click on vwc-expansion-panel to open it
3. Observe the slider state, rendered visuals are desynchronized: circular Tick is rendered at the left most side, and the bold line ends and rendered properly is indicating the actual slider value: 2

Expected behavior
Slider should be rendered initially properly when it's hidden inside [vwc-expansion-panel] element

Screenshots

Slider on screens is configured with the range from 1 to 10

Initially the panel is closed

When opening, we could observe the unwanted rendering state

When hovered, tick tooltip is showing selected value which is 2, but the tick itself is rendered at the left most edge of the slider

Desktop

• OS: Windows
• Browser chrome
• Version 89.0.4389.128 (Official Build) (64-bit)

Additional context

When triggering manual browser window resize operation during desynchronized state, sliders suddenly will be rendered properly ✔️

[gullerya]

Thanks for the detailed description!

[gullerya]

Few points:

• the issue is due to the non-reactive use of getBoundingClientRect, which result is a basis for thumb's shift calculation
• each time the slider rendered in display: none, for example, container - the issue will be reproduced
• MWC team has an issue opened on this topic here - I've added my observations there as well
• meanwhile there is this PR, where the issue solved with ResizeObserver, until MWC team will provide their solution