Repository navigation
On mobile web, toasts render underneath the keyboard. #9681
Description
Activity
I suppose this is because the ToastContainer doesn't adjust itself with respect to changes in the visual viewport. I think it would be good to update this, will bring it up with the team.
I don't remember of the top of my head but I think there might be some additional complexity here hence why we've had to calculate the viewport height in an alternate manner for trays and what not. Will have to dig when I get some time, but definitely feel free to open a PR if you've got a working configuration already.
Reacted by Angelo Verlain- added a commit that references this issue
on Mar 24, 2026 I've been thinking about this some more, do we actually want to do this? There isn't much room on a mobile screen, if we have the toast above the keyboard, then the input you're actively trying to enter text into could be obscured.
In addition, when you try to close the Toast, focus would be removed from the input, causing the keyboard to close. It's possible that if the user is immediately closing the toast (as opposed to expanding all toasts or interacting with some action inside a toast) then focus will be restored to the input. However, this may take a moment, causing a flicker where the keyboard starts animating out and then back in.
If the user interacts instead with something more like the expand all of a ToastList like we have in S2 or an action inside the toast, then the toast may move away from where the users finger is.
I think we want to do something since having the Toast appear behind the keyboard is undesirable. According to Spectrum, Toasts are "meant to be noticed without disrupting a user's experience or requiring an action to be taken." So in my opinion, the Toast should at least be visible even if the keyboard is open. I imagine that maybe you would want a slightly different UI, similar to the banner notifications that appear when you get a new message or something. So rather rendering the Toast right above the keyboard, maybe it should appear at the top of the visual viewport.
Spectrum recommends that the placement of the Toast change if it isn't noticeable or disrupts the user experience. We do have
placementprop for S2 Toast where you can render a Toast at the top.Discussed today. We'll do our best to get that PR updated to work like Android. However, in light of the comments that I brought up, it is probably best for you to move the toasts to the
topof the screen for mobile users. This should already be doable.Reacted by scott
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