How to perform action strictly after scrollToIndex has already finished?

Firstly I just want you to know that before posting this issue, I tried asking on Stack Overflow to no avail. Here is the link to the unanswered post.

I also tried to access the Slack channel but was not authorized to log in.

---

I have a <List> component. I am building a feature where it:

1. Scrolls to a particular row in the <List>. It does by using the scrollTo scrollToIndex prop.
2. Scrolls to a particular line in that row. It does this by doing document.getElementById('myId').scrollIntoView().

How can I ensure that step (2) occurs after step (1)?

Note: I have already tried both onRowsRendered and onScroll but even using those callbacks, there is still a race condition between (2) and (1).

Here is the CodeSandbox link

Update: despite trying for a long time, I can’t actually get the CodeSandbox example to reproduce the race condition. I definitely am seeing such a race condition in my local instance, but since I can’t reproduce it, it’s probably a problem specific to my project 😢.

Please feel free to close the issue.

[wuweiweiwu]

to answer your question. the onScroll prop you pass in is bound to the html onscroll event which is triggered every moment you scroll. The scrollToIndex prop is used to calculate the scrollTop and then is manually set on the html element.

So onScroll is actually not called when you just use scrollToIndex

[akraines]

https://stackoverflow.com/a/49937960/5683904