Sheet: setting its scroll position while it slides out leaves it open, `data-exiting`, for good

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

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

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

評価

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

調査の方向性

Start by reading the Sheet exit behavior and the related #10813 scrollend discussion; the issue does not name implementation files or tests. Reproduce the next-frame scrollTop write in the provided example, then trace how the exit scroll and IntersectionObserver interact with scroll snapping. Done means the sheet completes closing after a mid-exit scroll position write and the regression is covered by a test.

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

説明

has workaround Sheet
Provide a general summary of the issue here

If anything sets the sheet scroller's position while a closing Sheet slides out, even to the value it already has, the slide stops. Early in the slide the sheet snaps back open and never finishes closing: it stays open over the page with data-exiting, blocks clicks on the page, and Escape no longer closes it. Only a reload clears it.

🤔 Expected Behavior?

The sheet finishes closing.

😯 Current Behavior

One write of scroller.scrollTop = scroller.scrollTop at different points after pressing Close (bottom sheet, 390×844; open at scrollTop 844, closed at 0):

Write after Close Value written Result
none closes in ~470ms
same tick 844 closes
next frame 844 stuck fully open, data-exiting
50ms 836 stuck open (rests at 840)
150ms 611 stuck (rests at 801, sheet 76px from the top)
300ms 172 closes
💁 Possible Solution

onExit smooth-scrolls the scroller to the exit position and waits for the IntersectionObserver to report the content off screen (react-aria-sheet-close). Setting the scroll position cancels the smooth scroll in progress. Scroll snapping then rests on the nearest snap point, and when that's the open one, the content never leaves the screen, the observer never reports 0, and the exit never resolves.

One option: while exiting, on scrollend, if the scroller isn't at the exit position, scroll to it again. The scrollend fallback proposed for #10813 (#10870) only resolves when the scroller is already at the exit position, so it wouldn't cover this: here the scroller rests at the open position.

🔦 Context

TanStack Router's scroll restoration triggers this. After each navigation it writes back the saved position of every element that scrolled, and that includes the sheet's scroller. Our mobile navigation menu is a Sheet that closes when you navigate. Whenever the new page renders while the menu is still sliding out (e.g. browser Back with the menu open), the menu gets stuck over the page. We work around it by giving the scroller a data-scroll-restoration-id that changes when the sheet opens or closes, since TanStack has no per-element opt-out (TanStack/router#3413). But any code that sets the scroller's position mid-close does the same thing.

🖥️ Steps to Reproduce
import { useState } from 'react'
import { Button, Sheet, SheetBackdrop, SheetContent, SheetOverlay } from 'react-aria-components'

export function App() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open sheet</button>
      <SheetOverlay isOpen={open} onOpenChange={setOpen} position="bottom">
        <SheetBackdrop />
        <Sheet overscrollPadding style={{ background: 'white', width: '100%', height: 'calc(100% - 32px)' }}>
          <SheetContent aria-label="Test sheet">
            <Button slot="close">Close</Button>
          </SheetContent>
        </Sheet>
      </SheetOverlay>
    </>
  )
}
  1. Click Open sheet and wait for it to finish sliding in.
  2. In the console, close it and set its scroll position on the next frame, the way a router's scroll restoration would:
const scroller = document.querySelector('[data-sheet-scroll]')
document.querySelector('[data-sheet-scroll] button').click()
requestAnimationFrame(() => { scroller.scrollTop = scroller.scrollTop })
  1. The sheet stays open, the overlay keeps data-exiting, and the page behind it can't be clicked. Escape does nothing.

Without step 2's write, the sheet closes normally.

Version

react-aria-components 1.22.1, React 19.2.4

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Chromium 152 on macOS; first seen in desktop Chrome at a phone-width window.

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

Related: #10813

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

環境構築

はじめの一歩

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

adobe/react-spectrum のほかの issue

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

似ている issue

TypeScript の issue をもっと見る

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

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