Sheet: slow-drag dismissal depends on the viewport, not the sheet's height, so a short sheet can only be closed by a flick

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

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
57/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend, mobile

调研方向

Start with starters/docs/src/Sheet.tsx and Sheet.css to understand the example, then inspect the sheet implementation and its drag dismissal behavior; the issue points to dist/private/Sheet.js from version 1.22.1. Reproduce the slow drag on a short sheet in iOS Safari and compare it with a full-height sheet. Done when a slow drag can dismiss a short sheet based on its height, while the described flick behavior still works.

由索引模型根据 Issue 内容生成。

描述

Provide a general summary of the issue here

On a phone, a slow drag only dismisses a Sheet once it has travelled past about half of the viewport, not a share of the sheet's own height. A short sheet (sized by its content, well under half the screen) therefore cannot be closed by dragging at all: dragged all the way to the bottom edge of the screen it still snaps back open. Only a quick flick closes it.

🤔 Expected Behavior?

Releasing a drag dismisses the sheet once it has been pulled down past a threshold relative to its own height (or on a downward flick), whatever the sheet's height, as native iOS sheets and drawer libraries do. A short sheet can be dragged closed like a tall one.

😯 Current Behavior
  • A full-height sheet closes on a slow drag only past roughly half of the screen.
  • A sheet sized by its content (the docs example's cart content, about two thirds of the screen on an iPhone) never closes on a slow drag, even when dragged down to the bottom edge of the screen. It snaps back open on release. A flick closes it.
💁 Possible Solution

From reading dist/private/Sheet.js (1.22.1): the swipe is native scrolling of the [data-sheet-scroll] element, a 200dvh track with scroll-snap-type: y mandatory, and without snapPoints there are two snap positions, closed and open. The scroll travel does not depend on the sheet's height, so on release the browser snaps to whichever position is nearer. For a sheet shorter than half the track, the finger reaches the bottom of the screen before the release point ever gets nearer "closed". A dismiss threshold relative to the sheet's height (and a velocity rule) would fix it; snapPoints does not seem to help, since the closed position stays at the end of the full track.

🔦 Context

Several of our sheets on phones are short: confirmations and small forms.

🖥️ Steps to Reproduce
  1. Take the docs' vanilla-CSS Sheet example (starters/docs/src/Sheet.tsx and Sheet.css at [email protected]) with its cart content, unchanged.
  2. Open it on an iPhone (iOS 27.0.1) in Safari.
  3. Drag the sheet down slowly, all the way to the bottom edge of the screen, and release.
  4. It snaps back open. Only a quick flick down closes it.
  5. With long content (a full-height sheet), a slow drag closes it only past about half of the screen.
Version

react-aria-components 1.22.1, React 19.2.8

What browsers are you seeing the problem on?

Safari

If other, please specify.

iPhone, Safari on iOS 27.0.1

What operating system are you using?

iOS

主要语言
TypeScript
星标
16k
派生
1.6k
平均合并
4 天 3 小时
30 天内合并 PR
39

环境准备

从这里开始

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

adobe/react-spectrum 的其他 Issue

查看 adobe/react-spectrum 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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