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

Abierto
  • ¿Algo no está bien?
#10,877 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
54/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 19 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.