[experimental] autoscroll fails when sortable items live within sticky container
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
I want to allow column headers within a data table to be draggable to re-order columns. My TableHeader which is the immediate container of the column headers uses position sticky to 'stick' the headers to the top of the table. useSortable works great for this until I encounter horizontal scrolling. If I drag a column header towards the end of the TableHeader, AutoScroller does not scroll the containing table horizontally.
This is because of the `isFixed` check within `getScrollingAncestors` as AutoScroller walks up the ancestor node tree looking for a scrollable container. This treats position sticky elements the same as position fixed elements but this doesn't seem right. `fixed` elements are fixed to a position within the viewport. `sticky` elements stick to the nearest scrolling container. In addition, they may be sticky in one direction only - as here, my TableHeader sticks to the top of its scrollable container. This should not stop this scrollableContainer being utilised for horizontal scrolling. When the sticky TableHeader container is encountered, the `isFixed` check returns true and we jump straight to ownerDocument as the scrollContainer, bypassing the actual scrollable container.
Contributor guide
Research direction
Start at AutoScroller and trace getScrollingAncestors while reproducing a horizontally scrollable table with a position: sticky TableHeader and sortable column headers. Verify that ancestor discovery continues past the sticky header to the table's scrollable container rather than switching to ownerDocument, and confirm horizontal autoscroll works near the table edge.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100