bug(drag-drop): Auto-scroll step is double the expected value due to RxJS bug

[Achilles1515]

The auto-scroll pixel step size per frame is currently set as 2.

/**
 * Number of pixels to scroll for each frame when auto-scrolling an element.
 * The value comes from trying it out manually until it feels right.
 */
const AUTO_SCROLL_STEP = 2;

But this is false. The actual scroll step is double this value (4).

ng-run demo

The above demo has a console.log statement added here:

/**
   * Starts listening to scroll events on the viewport.
   * Used for updating the internal state of the list.
   */
  private _listenToScrollEvents() {
    this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe(event => {
      if (this.isDragging()) {
        const scrollDifference = this._parentPositions.handleScroll(event);

        // <--- HERE --->
        console.log(scrollDifference);

        if (scrollDifference) {
          // ...
        }
      } else if (this.isReceiving()) {
        // ...
      }
    });
  }

Notice the typical value being reported is +4 or -4 while auto-scrolling.

GIF of auto-scroll and resulting console log:

Problem

The interval(0, animationFrameScheduler) call below triggers an RxJS bug that causes the work in the subscription to be called twice as often.

  /** Starts the interval that'll auto-scroll the element. */
  private _startScrollInterval = () => {
    this._stopScrolling();

    interval(0, animationFrameScheduler)
      .pipe(takeUntil(this._stopScrollTimers))
      .subscribe(() => {
        const node = this._scrollNode;

        if (this._verticalScrollDirection === AutoScrollVerticalDirection.UP) {
          incrementVerticalScroll(node, -AUTO_SCROLL_STEP);
        } else if (this._verticalScrollDirection === AutoScrollVerticalDirection.DOWN) {
          incrementVerticalScroll(node, AUTO_SCROLL_STEP);
        }

        if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
          incrementHorizontalScroll(node, -AUTO_SCROLL_STEP);
        } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
          incrementHorizontalScroll(node, AUTO_SCROLL_STEP);
        }
      });
  }

More information on this bug can be found in this issue report, and a fix is supposedly in for the next RxJS patch. Even so, it is not recommended to use animationFrameScheduler to run loops. The new animationFrames observable is for this purpose, but that's an RxJS 7.0 feature.

I think a regular requestAnimationFrame loop should be used instead.

Environment

• Angular:
• CDK/Material: 9.2.2
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):