adobe / adobe/react-spectrum

On mobile web, toasts render underneath the keyboard.

Open
#9,681 6 comments 0 reactions 0 assignees View on GitHub
bug Toast
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

If you trigger a toast while the keyboard is open, it renders underneath the keyboard. Depending on keyboard, it can be mostly obscured or completely out of the visible area.

### 🤔 Expected Behavior?

Toast should spawn above the keyboard.

### 😯 Current Behavior

Toast renders under keyboard
https://codesandbox.io/p/devbox/react-spectrum-playground-forked-8tjkw6
https://8tjkw6.csb.app/
Open this sandbox on a mobile device, then type in the textfield. Every change event triggers a new toast.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/react-spectrum-playground-forked-8tjkw6

### Version

3.46.1

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

Firefox, Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

iOS, Android

### 🧢 Your Company/Team

Adobe/DC

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.