iOS: the list in a searchable Select doesn't scroll after an autoFocus SearchField opens the keyboard

Aperta
  • Qualcosa non va?
#10,925 0 commenti 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
55/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with the StackBlitz reproduction and trace how Select, Popover, Autocomplete, SearchField, and ListBox handle focus and scrolling when the iOS keyboard opens. Reproduce in Safari on an iPhone, comparing autofocus on mount with tapping the search field after dismissing the keyboard. Done when swiping the list scrolls it immediately after opening with the keyboard visible, without moving the page or jumping the popover.

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

Descrizione

Provide a general summary of the issue here

On iOS Safari, a Select whose Popover holds an Autocomplete with an autoFocus SearchField and a scrollable ListBox can't be scrolled while the keyboard is open. A swipe on the list moves the page behind it instead, and the popover jumps around. Once the keyboard is hidden and the search field is tapped again, the same swipe scrolls the list.

🤔 Expected Behavior?

A swipe on the list scrolls the list, also right after the popover opens and the search field gets focus.

😯 Current Behavior

https://github.com/user-attachments/assets/e3795752-fed3-485c-9ddc-6fb02d6c05c0

  • 3.0 s: tap the trigger. The popover opens above it, the search field gets focus and the keyboard opens.
  • 3.4–4.4 s: swipe the list. The list stays at "Person 1". The page moves instead: the popover slides off screen, shows up below the trigger for a moment, then returns above it.
  • 7.0–10.0 s: after hiding the keyboard and tapping the search field again, the same swipe scrolls the list.
StackBlitz Reproduction

https://stackblitz.com/github/aNNexatioN/react-aria-ios-keyboard-repro

🖥️ Steps to Reproduce
  1. Open the repro in Safari on an iPhone.
  2. Tap "Select a person". The search field gets focus and the keyboard opens.
  3. Swipe the list. It doesn't scroll, the page moves instead.
  4. Hide the keyboard (✓ above it), then tap the search field again.
  5. Swipe the list. Now it scrolls.
💁 Possible Solution

We haven't found the cause. It happens only when the keyboard opens through autoFocus as the popover mounts. When the user taps the search field to focus it, the list scrolls.

Our workaround is no autoFocus on touch screens:

<SearchField autoFocus={!window.matchMedia("(pointer: coarse)").matches}>
🔦 Context

This is the searchable select pattern. HeroUI v3's Autocomplete is built from the same components, so every HeroUI Autocomplete has this on iPhones: the user opens it, the keyboard comes up, and the list doesn't react to swipes.

Version

react-aria-components 1.22.1 (react-aria 3.53.1), React 19.3.1

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

iOS 26.7.2 (iPhone 16 Pro)

🧢 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.