Escape doesn't dismiss a ModalOverlay in WebKit while its CSS keyframe enter animation is running (react-aria 3.53 / RAC 1.22)

Aperta
  • Qualcosa non va?
#10,913 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
22/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start by reproducing the Escape-during-enter-animation case in Playwright WebKit using a ModalOverlay with a CSS keyframe animation while isEntering is true. Then trace how useEnterAnimation, useModalOverlay and useDialog gate keyboard dismissal on isEntering, using the 3.51.0 to 3.53.0 change (PR #10102) as the reference point. Done means Escape closes the modal during the enter animation in WebKit and the Chromium and Firefox behaviour is unchanged.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

waiting on author
Provide a general summary of the issue here

In WebKit, pressing Escape while a ModalOverlay is still playing a CSS keyframe enter animation does nothing, and the modal stays open. It works in Chromium and Firefox, and it worked in react-aria 3.51.0 / RAC 1.20.0. Using a CSS transition for the same fade instead of a keyframe animation avoids the problem.

🤔 Expected Behavior?

Escape dismisses the modal whenever it's open, including during its enter animation, as it did in 3.51.0 and still does in Chromium/Firefox.

😯 Current Behavior

The keypress is ignored until the enter animation has finished. Pressing Escape again afterwards closes the modal.

A minimal setup that reproduces it (Tailwind + tailwindcss-animate):

Open
<ModalOverlay
isDismissable
className={({ isEntering }) => isEntering ? 'animate-in fade-in duration-200' : ''}

<Modal>
  <Dialog><input autoFocus /></Dialog>
</Modal>
Playwright (WebKit): focus the trigger, press Enter, then press Escape right away. The dialog is still visible after 5 s.
StackBlitz Reproduction

It's hard to reproduce this in Stackblitz

🖥️ Steps to Reproduce
  1. Render the snippet above, with a CSS keyframe enter animation (e.g. animate-in fade-in duration-200) on ModalOverlay while isEntering.
  2. Open the page in Safari / Playwright WebKit.
  3. Focus the "Open" button and press Enter.
  4. Immediately press Escape, before the 200 ms fade-in has finished.
  5. The modal stays open. Pressing Escape again after the animation has finished closes it.
💁 Possible Solution

Keyboard dismissal (and the other useOverlay behaviour) should stay active while isEntering is true. Alternatively, the enter-animation tracking shouldn't block it when the running animation is a CSS keyframe animation on the overlay.

🔦 Context

Our Playwright WebKit integration tests started failing consistently after upgrading react-aria 3.51.0 → 3.53.1 and react-aria-components 1.20.0 → 1.22.1. It also affects real Safari users: Escape right after opening a modal (e.g. a ⌘K command menu) is ignored.

We worked around it by switching the overlay's fade from a CSS keyframe animation to a CSS transition, but keyframe enter animations on ModalOverlay are a common pattern (including in the RAC Tailwind examples), so others are likely to hit this.

PR #10102 (3.53.0) reworked useEnterAnimation and added isEntering handling to useModalOverlay/useDialog. That looks like the likely source; #10782 was another regression from the same change.

Version

[email protected]
[email protected]
[email protected]

What browsers are you seeing the problem on?

Safari

If other, please specify.

WebKit, Playwright WebKit 27.2

What operating system are you using?

macOS, and Linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
4g 10h
PR unite (30g)
42

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.