Tab Indicator: computeContentClientRect breaks React render pooling

[jamesmfriedman]

I've filed similar issues like this before, just found another example.

Basically, using getBoundingClientRect to force a repaint breaks React (and I'm presuming other things) that use Async rendering.

material-components-web/packages/mdc-tab-indicator/sliding-foundation.js

Line 51 in cffe895

this.computeContentClientRect();

My current workaround was to just not call the foundation and copy the code over. This works as expected with a RAF

activate(previousIndicatorClientRect: ClientRect) {
    // Early exit if no indicator is present to handle cases where an indicator
    // may be activated without a prior indicator state
    if (!previousIndicatorClientRect) {
      this.foundation.adapter_.addClass(
        MDCTabIndicatorFoundation.cssClasses.ACTIVE
      );
      return;
    }

    const currentClientRect = this.computeContentClientRect();
    const widthDelta =
      previousIndicatorClientRect.width / currentClientRect.width;
    const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
    this.foundation.adapter_.addClass(
      MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION
    );
    this.foundation.adapter_.setContentStyleProperty(
      'transform',
      `translateX(${xPosition}px) scaleX(${widthDelta})`
    );
    // THE FIX
    requestAnimationFrame(() => {
      this.foundation.adapter_.removeClass(
        MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION
      );
      this.foundation.adapter_.addClass(
        MDCTabIndicatorFoundation.cssClasses.ACTIVE
      );
      this.foundation.adapter_.setContentStyleProperty('transform', '');
    });
  }

[acdvorak]

Drawer and Dialog had the same issue. Need to add rAF. Thanks James!