clauderic / clauderic/react-sortable-hoc
Crawling out of sync when used with a react-virtualized table inside of a portal
- Dominant language
- JavaScript
- Stars
- 10.9k
- Forks
- 959
- PR merge metrics
- No merged PRs in 30d
Description

I am using react-sortable-hoc to reorder items in a react-virtualized table. This is rendered using a React portal inside of a new popout window. When the parent window is scrolled down, the crawl goes out of sync with the new window. If the parent window is scrolled back up to the top, the draggable items behave as expected.
I am supplying a `ContainerGetter` which finds the `ReactVirtualized__Grid` component within the React portal, which is rendered in a popout window:
```
getScrollContainer = (): HTMLElement => {
return document.getElementsByClassName('ReactVirtualized__Grid')[0] as HTMLElement
}
```
When I `console.log` the returned HTML element, it appears as the hightlighted blue area in my screenshot above.
I suspect that due to the parent being in a separate window to my react-virtualized table, the crawl calculation is based off of the wrong window's scroll position.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the react-sortable-hoc setup with a react-virtualized table rendered through a React portal in a popout window, using the supplied ContainerGetter. Inspect the crawl calculation and scroll-position handling while the parent window is scrolled. Done means draggable items remain aligned with the table regardless of the parent window's scroll position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100