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 件 担当者 0 名 GitHub で見る

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

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

評価

難易度
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
平均マージ
3日 23時間
マージ済み PR（30日）
43

環境構築

はじめの一歩

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

adobe/react-spectrum のほかの issue

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

似ている issue

TypeScript の issue をもっと見る

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

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