issue #789: fixing the slider miscalc when resized

common/foundation/src/general-utils.ts

@@ -37,3 +37,16 @@ export function assert(condition: unknown, msg?: string): asserts condition {
  throw new Error(msg);
  }
 }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function debounce(
+ callback: (...args: any[]) => void,
+ context: unknown,
+ waitInMS = 50
+) {
+ let timeoutId: number;
+ return (...args: any[]) => {
+ globalThis.clearTimeout(timeoutId);
+ timeoutId = globalThis.setTimeout(() => callback.apply(context, args), waitInMS);
+ };
+}

components/list/src/vwc-list.ts

@@ -1,4 +1,5 @@
 import '@vonage/vvd-core';
+import { debounce } from '@vonage/vvd-foundation/general-utils';
 import { customElement } from 'lit-element';
 import { List as MWCList } from '@material/mwc-list/mwc-list';
 import { style as vwcListStyle } from './vwc-list.css.js';
@@ -11,20 +12,6 @@ declare global {
  }
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function debounce(
- callback: <T>(this: T, ...args: any[]) => void,
- waitInMS = 50
-) {
- let timeoutId: number;
- return function <T> (this: T, ...args: any[]) {
- clearTimeout(timeoutId);
- // eslint-disable-next-line @typescript-eslint/no-this-alias
- const context = this;
- timeoutId = window.setTimeout(() => callback.apply(context, args), waitInMS);
- };
-}
-
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
 MWCList.styles = [styleCoupling, mwcListStyle, vwcListStyle];
@@ -36,6 +23,6 @@ MWCList.styles = [styleCoupling, mwcListStyle, vwcListStyle];
 export class VWCList extends MWCList {
  constructor() {
  super();
- this.layout = debounce(super.layout);
+ this.layout = debounce(super.layout, this);
  }
 }

components/slider/src/vwc-slider.ts

@@ -1,4 +1,5 @@
 import '@vonage/vvd-core';
+import { debounce } from '@vonage/vvd-foundation/general-utils';
 import { customElement } from 'lit-element';
 import { Slider as MWCSlider } from '@material/mwc-slider';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
@@ -23,6 +24,20 @@ MWCSlider.styles = [styleCoupling, mwcSliderStyle, vwcSliderStyle];
  */
 @customElement('vwc-slider')
 export class VWCSlider extends MWCSlider {
+ #debouncedLayout = debounce(this.layout, this, 96);
+ /* eslint-disable compat/compat */
+ #resizeObserver = new ResizeObserver(this.#debouncedLayout);
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.#resizeObserver.observe(this);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.#resizeObserver.unobserve(this);
+ }
+
  async firstUpdated(): Promise<void> {
  await super.firstUpdated();
  this.pinMarkerText = this.value?.toLocaleString();

components/slider/test/slider.test.js

@@ -4,6 +4,7 @@ import {
  isolatedElementsCreation,
  textToDomToParent,
  waitNextTask,
+ waitInterval,
  assertComputedStyle,
 } from '../../../test/test-helpers.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
@@ -26,14 +27,28 @@ describe('slider', () => {
  });
 
  it('should have internal contents', async () => {
- const actualElements = addElement(
+ const [slider] = addElement(
  textToDomToParent(`<${VWC_SLIDER}></${VWC_SLIDER}>`)
  );
  await waitNextTask();
- expect(actualElements[0]).shadowDom.to.equalSnapshot({
+ expect(slider).shadowDom.to.equalSnapshot({
  ignoreAttributes: ['style'],
  });
  });
+
+ it('should have thumb positioned correctly when rendered first in hidden space', async () => {
+ const [wrapper] = addElement(
+ textToDomToParent(`<div style="display: none"><${VWC_SLIDER} min="0" max="100" value="50"></${VWC_SLIDER}></div>`)
+ );
+ await waitNextTask();
+ const slider = wrapper.firstElementChild;
+ const thumb = slider.shadowRoot.querySelector('.mdc-slider__thumb-container');
+
+ wrapper.style.display = 'block';
+ assertComputedStyle(slider, { width: '120px' });
+ await waitInterval(120);
+ assertComputedStyle(thumb, { transform: 'matrix(1, 0, 0, 1, 49.5, 0)' });
+ });
  });
 
  describe('styling', () => {