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

オープン
  • 何か問題がありますか？
#10,925 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

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

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
55/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
accessibility, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
16k
フォーク
1.6k
平均マージ
4日 10時間
マージ済み PR（30日）
42

環境構築

はじめの一歩

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

adobe/react-spectrum のほかの issue

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

似ている issue

TypeScript の issue をもっと見る

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

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