clauderic / clauderic/react-sortable-hoc

Crawling out of sync when used with a react-virtualized table inside of a portal

Open
#638 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.9k
Forks
959
PR merge metrics
No merged PRs in 30d

Description

![issue](https://user-images.githubusercontent.com/14214838/69696329-40277f00-1144-11ea-84de-5801f1792ad1.png)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.