React-virtualized: scrollToRow, scrollToPosition no longer works with WindowScroller after updating React to v16.8

[michchan]

For my case, I've tested that it works for both methods without a WindowScroller. Any idea what's happening

Please reference this issue:
https://github.com/bvaughn/react-virtualized/issues/1179#issuecomment-593502991

What is the current behavior?

Calling scrollToRow and scrollToPosition no longer scrolls properly, but the functions are defined and I can log to the console. It just failed silently.

What is the expected behavior?

It should simply scroll to the right position / row.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

| | |
|-------------------|----------|
| Browser | Chrome v80 |
| OS | OSX 10.15.3 |
| React | 16.8.5 |
| React DOM | 16.8.5 |
| react-virtualized | 9.21.2 |

[nicholeuf]

There are multiple open issues related to this same problem, some referencing List/Grid and others referencing WindowScroller. None of the workarounds referenced in all of these issues are working and downgrading react is not a viable solution for us.

Any idea if this is going to be fixed soon?

[fekgab]

As a quick workaround, this have worked for me - restrict the version to: "react-virtualized": "9.21.1" in package.json.
As I noticed the patch version updated had introduced the issue.

[heyouquan]

I have the same problem with this.Are you deal with this problem?

[michchan]

Sorry lads, forgot to post. My quick workaround is like this:

import getScrollYFromElementOrWindow from 'simply-utils/dist/dom/getScrollYFromElementOrWindow';
import tryUntil from 'simply-utils/dist/utils/tryUntil';

...

/*
* Put this as the `ref` prop of the `List` component 
*/
const handleRef = useCallback((ref) => {
    if (ref !== null) {
        /**
         * * TEMP Fix for virtualized list scrollToPosition not working issue when using with WindowScroller
         * 
         * @TODO: Wait for PR
         * Ref: https://github.com/bvaughn/react-virtualized/issues/1179
         */
        if (windowScrollerEnabled) {
            // Override and fix scrollToPosition
            ref.scrollToPosition = (scrollTop: number) => tryUntil(() => {
                // Use the scroll element ref passed from props
                const scrollEl = scrollElementRef?.current
                if (scrollEl) {
                    // Use the `scrollTo` method from the passed element
                    scrollEl.scrollTo({ top: scrollTop })
                    // Get updated scroll top form the element
                    const updatedScrollTop = getScrollYFromElementOrWindow(scrollEl)
                    // Done if targeted scroll top is met (case: true), or
                    // Try next if targeted scroll top is not met (case: false)
                    return updatedScrollTop === scrollTop
                }
                // Try next
                return false
            }, 30, 0)
            // Override and fix scrollToRow
            ref.scrollToRow = (index: number) => {
                const scrollTop = ref.getOffsetForRow({ index })
                ref.scrollToPosition(scrollTop)
            }
        }
    }
}, [scrollElementRef, windowScrollerEnabled])     

Btw, simply-utils is just the open-source npm utils library I created. The tryUntil util is just keep calling the callback until success.