Repository navigation
On mobile web, toasts render underneath the keyboard. #9681
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
Activity
LFDanLu commentedon Feb 19, 2026
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.
snow893 commentedon Feb 19, 2026
@LFDanLu i think you can just add
to the ToastContainer. 100vh would be the default for web and 100dvh only takes precedence on mobile devices
LFDanLu commentedon Feb 19, 2026
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.
fix(s2/Toast): offset toast above on-screen keyboard on mobile
snowystinger commentedon Mar 30, 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.
yihuiliao commentedon Apr 1, 2026
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.See: https://spectrum.adobe.com/page/toast/
snowystinger commentedon Apr 1, 2026
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.snowystinger commentedon Sep 15, 2026
waiting on #10102 and #10558 to see if those utilities can help with this