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

未关闭
  • 哪里不对？
#10,877 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
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
平均合并
3 天 9 小时
30 天内合并 PR
45

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

adobe/react-spectrum 的其他 Issue

查看 adobe/react-spectrum 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。