adobe / adobe/react-spectrum

iOS Keyboard moves Dialog out of viewport

Open
#9,858 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

On iOS it can happen that the keyboard moves the dialog out of the viewport. In this scenario top: 0 will result in the dialog starts outside of the viewport.

In most cases it looks like this:
Image

But sometimes it looks like this:
Image

### 🤔 Expected Behavior?

I guess this is a Safari Bug on iOS, but maybe this can be detected and there could be a workaround for this.

### 😯 Current Behavior

Sometimes the dialog will be moved out of the viewport when the keyboard is opened.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

I made the screenshots on https://react-aria.adobe.com/Modal with the first example.

1. Just open the dialog. Now it looks good like it should.
2. Click on the text or headline of the dialog to close the keyboard
3. Click on the second input field (E-Mail) to open the keyboard
4. close and open it several times to reproduce the gap between the keyboard and the dialog

Sadly it does not happen every time, therefore several attempts are necessary.

### Version

The version that was used on the official documentation of react aria

### What browsers are you seeing the problem on?

Safari

### If other, please specify.

_No response_

### What operating system are you using?

iOS 26

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Modal first example on the react-aria.adobe.com documentation and reproduce the issue in Safari on iOS by repeatedly opening and closing the keyboard with the second input focused. Done means the dialog no longer moves outside the viewport or leaves a gap above the keyboard during the described sequence.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.