Sheet: slow-drag dismissal depends on the viewport, not the sheet's height, so a short sheet can only be closed by a flick
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 57/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- react, typescript
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
- Take the docs' vanilla-CSS Sheet example (
starters/docs/src/Sheet.tsxandSheet.cssat[email protected]) with its cart content, unchanged. - Open it on an iPhone (iOS 27.0.1) in Safari.
- Drag the sheet down slowly, all the way to the bottom edge of the screen, and release.
- It snaps back open. Only a quick flick down closes it.
- 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
- Lenguaje dominante
- TypeScript
- Estrellas
- 16k
- Forks
- 1.6k
- Merge medio
- 3 d 23 h
- PR fusionados (30 d)
- 43
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de adobe/react-spectrum
-
PreviewTrigger: the preview dialog has no accessible namePosiblemente ocupada @therealemmanueloppong la tomó hace 1 día. Abiertoaccessibility bug PreviewTrigger
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
adobe/react-spectrum#10917 · 3 comentarios ·
Los mantenedores suelen responder en 1 día
-
S2 quiet Picker menu is always 192px wide: its width calc() has no unitPosiblemente ocupada @darshpatel1052 la tomó hace 4 días. Abiertowaiting on author
Dificultad 2/5 Menos de una hora Aptitud para principiantes 88/100
adobe/react-spectrum#10909 · 3 comentarios ·
Los mantenedores suelen responder en 1 día
-
DatePicker omits timezone for initially empty fields despite zoned placeholderValuePosiblemente ocupada @mrlexcoder la tomó hace 4 días. Abiertobug
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
adobe/react-spectrum#10900 · 2 comentarios ·
Los mantenedores suelen responder en 1 día
-
Separator adds a redundant role="separator" to its default <hr>Posiblemente ocupada @Janani-bn la tomó hace 4 días. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
adobe/react-spectrum#10894 · 2 comentarios ·
Los mantenedores suelen responder en 1 día
-
ComboBox with selectionMode="multiple": Cmd/Ctrl+A does nothing while the popover is openPosiblemente ocupada @mangeshraut712 la tomó hace 10 días. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
adobe/react-spectrum#10866 ·
Los mantenedores suelen responder en 1 día
Todos los issues de adobe/react-spectrum
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
binding:python bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
coollabsio/orbit#72 ·
Los mantenedores suelen responder en 1 día
-
Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 67/100
Los mantenedores suelen responder en 1 día
-
bug needs-triage potential-regression
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
aws/aws-sdk-js-v3#8408 ·
Los mantenedores suelen responder en 1 día