Virtualized Tree/GridList drop indicator is offset when the collection is scrolled by an ancestor

オープン
  • 何か問題がありますか？
#10,597 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
55/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

まず packages/react-aria/src/dnd/useDrop.ts と packages/react-stately/src/layout/ListLayout.ts を通じてポインター座標を追跡し、次に TableLayout.ts の対応するロジックを、packages/react-aria/src/virtualizer/ScrollView.tsx と packages/react-aria-components/src/Virtualizer.tsx における viewportOffset の処理と比較します。virtualized な Tree または GridList で drag and drop を有効にし、報告された nested-scroll のケースを再現します。祖先がスクロールした後もインジケーターがポインターを追従すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Provide a general summary of the issue here

When a virtualized Tree or GridList with dragAndDropHooks sits inside a scrollable ancestor (so the ancestor scrolls while the collection itself stays at scrollTop 0), the drop indicator drifts away from the pointer during a drag. The offset grows with how far the ancestor has scrolled and eventually the indicator lands off screen entirely.

Expected Behavior

The drop indicator should track the pointer accurately no matter whether the collection scrolled itself or an ancestor scrolled around it.

Current Behavior

Virtualizer hardcodes allowsWindowScrolling: true (packages/react-aria-components/src/Virtualizer.tsx, lines 109 and 140). Because of that, visibleRect on the virtualizer state folds in viewportOffset, a value ScrollView tracks whenever an ancestor scroll moves the collection element above y=0 in the viewport (packages/react-aria/src/virtualizer/ScrollView.tsx, the onScroll branch for target !== ref.current).

ListLayout.getDropTargetFromPoint does this (packages/react-stately/src/layout/ListLayout.ts, around line 740):

x += this.virtualizer.visibleRect.x;
y += this.virtualizer.visibleRect.y;

to turn the incoming pointer position into content space coordinates. That incoming x, y already comes from useDrop (packages/react-aria/src/dnd/useDrop.ts), computed as event.clientX/clientY minus the collection element's getBoundingClientRect(). Since getBoundingClientRect reflects the element's current position on screen, that value already accounts for however far the ancestor has scrolled the element. Adding visibleRect on top adds the same ancestor offset a second time, and the error grows with scroll depth.

Possible Solution

This looks like it belongs in ListLayout.getDropTargetFromPoint (and the matching spot in TableLayout), where only the collection's own internal scroll offset should be added rather than the whole visibleRect once viewportOffset is nonzero. We are not fully sure this is the cleanest fix given allowsWindowScrolling is meant to support real window scrolling too, so we would rather describe the behavior than assert the exact patch. Downstream we worked around it by subclassing ListLayout, reading the collection element's own scrollLeft and scrollTop directly, and adjusting the point passed into super.getDropTargetFromPoint so its addition of visibleRect nets out to just that local scroll value. Happy to share that subclass or open a PR if that direction sounds reasonable.

Context

We hit this in Phi, Sigma Computing's internal design system, where a Tree with drag and drop reordering is nested inside an outer scrollable panel. With enough rows the outer panel scrolls instead of the tree itself, and the drop indicator becomes unusable after a couple of screens of scroll. We have a local workaround, but wanted to report the root cause since it would affect any virtualized collection with drag and drop nested inside a scrollable ancestor, not just our case.

Steps to Reproduce

  1. Render a Tree or GridList from react-aria-components with dragAndDropHooks enabled and enough rows to be virtualized.
  2. Put it inside an outer div with overflow auto and a fixed height, where the outer div is what actually scrolls rather than the collection's own scrollbar.
  3. Scroll the outer div down so the collection element's bounding rect top moves above the outer div's visible top edge.
  4. Start dragging a row and move the pointer near the top, middle, and bottom of the visible rows.
  5. Compare the rendered drop indicator against the pointer. It will be offset, growing with how far the outer div has scrolled, and disappears once the offset exceeds the visible area.

We can put together a StackBlitz if the trace above is not enough to reproduce locally.

Version

react-aria-components 1.21.1, react-stately 3.50.0, react-aria 3.52.1

Browsers

Chrome, Firefox, Safari

Operating System

macOS

主要言語
TypeScript
スター
16k
フォーク
1.6k
平均マージ
4日 3時間
マージ済み PR（30日）
39

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

adobe/react-spectrum のほかの issue

adobe/react-spectrum の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。