Fix off-by-one frame issue causing flicker #1111
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Right now when you press arrow up/down/etc… and change the active item we wait for two rAF call backs. This has the affect of waiting after two full paints have finished. This results in, for the react version of the Combobox, a period of 1 frame where the active item has changed and re-rendered but the scroll hasn't happened yet.
Now, it is common to have to wait 2 rAF frames for the DOM to have updated in React because of a Chrome (and possibly Safari) bug with animations. However, in this case we're not waiting for animations to start, just scrolling. As far as I know the DOM should be updated by the end of the first cal to rAF but perhaps we should check if the element exists and schedule another one if it doesn't?
I'd also be curious to see if this behavior is a problem in React 18 because it does automatic batching of updates so it's possible that the timing would end up being correct. Not sure though — because I don't know much about the new fanciness in React 18.