Get help on Discord

Menu popovers not working in Sanity

9 replies
Last updated: May 22, 2024
Hi, is anyone else having an issue with menu popovers from within sanity?
AI Update

I can see you're experiencing popover issues in Sanity Studio! Unfortunately, this is a pretty vague issue that could have several causes, so I'll cover the most common scenarios.

What "Menu Popover Issues" Usually Mean:

The most common problems people report are:

  • Popovers not appearing at all
  • Popovers being cut off or clipped by parent containers
  • Popovers appearing in the wrong position
  • Rendering glitches or visual artifacts

General Troubleshooting Steps:

  1. Update your packages - Make sure you're running recent versions of sanity and @sanity/ui. Many popover-related bugs have been fixed in recent releases:

    npm install sanity@latest @sanity/ui@latest

  2. Check your browser console - Open DevTools and look for JavaScript errors or warnings when you try to open the popover. This often reveals the specific issue.

  3. Clear browser cache - Sometimes cached CSS or JavaScript can cause rendering problems. Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R).

  4. Test in a different browser - This helps identify if it's browser-specific.

If You're Using Custom CSS:

If you've added custom styles to your Studio, check for:

  • overflow: hidden or overflow: auto on parent containers (these can clip popovers)
  • Custom z-index values that might be covering popovers
  • CSS that overrides Sanity UI's default styles

If You're Building Custom Components:

If you're using Sanity UI components in custom plugins or input components, make sure you've wrapped your app with the ThemeProvider from @sanity/ui and that all peer dependencies are correctly installed.

Need More Specific Help:

Since your question is quite general, it would really help to know:

  • What exactly happens when you try to use the popover? (Does nothing appear? Does it appear incorrectly?)
  • Which menu/popover is having issues? (Document actions menu, field options, custom component?)
  • Are there any errors in the browser console?
  • What version of Sanity Studio are you running?
  • Are you using any custom styling or plugins?

If you can share more details about the specific behavior you're seeing, the community can provide more targeted solutions!

Show original thread
9 replies
I'm following the guide (yet again) for live previews, so this is a completely fresh install, literally copy and pasting commands from the guide. Straight away in the install, these popovers aren't working, for anything.
The content appears to be in there, through looking in the dev tools. And you can click on where things should be. But the content is all hidden inside.
Looks to be an issue specifically with the css property "--motion-content-opacity: 0;"
This doesn't seem to change like it should, and thus no popovers show.
Tried downgrading sanity a few times with no success
So I just figured this out...
Removing:


experimental: {
	taint: true,
}
from my next.config.mjs fixed this issue entirely.
I’ve been having the same issue. And your solution works, however I wonder, what does 
taint: true
do, is it safe to remove it?
Taint is an experimental feature that forces you to keep certain variables outside of the client, mostly API keys. That's also what it's used for here.
Removing it really shouldn't do anything, and I've got no idea why turning it on breaks the backend of Sanity at all
Alright, thanks for the info! Yeah, it’s strange that doing this fixed the issue.
Ahaa, and right now I ran into this 😄
Yeah, just remove the taint function. As that's technically what you've disabled.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?