Sheet stays exiting when the IntersectionObserver batches the ratio 0 entry behind another

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

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

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

評価

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

調査の方向性

The bug lives in SheetOverlay, which reads entries[0] from the IntersectionObserver callback for [data-sheet-content]. Start there and find every place the entry is read (setExpanded, isVisible, and the close check). Switch to the last entry, then reproduce by wrapping IntersectionObserver to deliver a ratio>0 and a ratio 0 entry in one callback. Done when the sheet unmounts and react-aria-sheet-close fires in that case.

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

説明

Provide a general summary of the issue here

This is the root cause of #10813, which was closed because we didn't know why the observer's last report goes missing. It isn't missing. On a slow frame the IntersectionObserver delivers two entries for the sheet content in one callback, and SheetOverlay only reads entries[0]. The ratio 0 entry is the second one, so the sheet stays data-exiting over the page.

🤔 Expected Behavior?

The sheet unmounts once its content has left the viewport.

😯 Current Behavior

The content slides out, the scroller rests at the exit position (scrollTop 0 for a bottom sheet) and fires scrollend, but react-aria-sheet-close never fires. The overlay stays in the DOM with data-exiting and blocks clicks on the page.

Logging the observer's entries for [data-sheet-content] (ms after the sheet opens), in a run that got stuck:

observe       @146
r=0.00 top=884   @211   initial, off screen
r=0.06 top=732   @299   entering
r=1.00 top=117   @653   entered
r=0.01 top=759   @2023  exiting  <- entries[0], read
r=0.00 top=771   @2023  gone     <- entries[1], ignored

Both exit entries arrive in the same callback. The sheet doesn't move after that, so no other report arrives.

💁 Possible Solution

Read the last entry for the target instead of the first:

let entry = entries[entries.length - 1];

This covers setExpanded, isVisible, and the close check. Since only one element is observed, the last entry is always the latest state.

🔦 Context

We build a Drawer on Sheet. Our date-picker tests on GitHub Actions kept failing at random with the drawer stuck after a backdrop tap. Locally we can reproduce it with CPU throttling: 10 of 40 runs got stuck. For now we work around it by dispatching react-aria-sheet-close ourselves on scrollend when the panel is off screen, which brought it to 40 of 40.

🖥️ Steps to Reproduce
  1. Open a bottom Sheet and let it fully enter.
  2. Throttle the CPU in Chrome (Emulation.setCPUThrottlingRate with rate: 6 over CDP, or DevTools > Performance > CPU 6x).
  3. Close it, for example by tapping the backdrop. Repeat a few times.
  4. Sometimes the sheet stays data-exiting at the exit position. Wrapping IntersectionObserver to log entries shows two entries in one callback, as above.

To simulate it without throttling, wrap IntersectionObserver so the callback gets the last ratio>0 report and the ratio 0 report together in one array.

Version

react-aria-components 1.22.1 (same code in 3.0.0-nightly-2691598d3-261008)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 26 (locally, with CPU throttling) and Ubuntu (GitHub Actions)

🕷 Tracking Issue

#10813

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

環境構築

はじめの一歩

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

adobe/react-spectrum のほかの issue

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

似ている issue

TypeScript の issue をもっと見る

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

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