Get help on Discord

Tabs plugin: Pasted code not visible until page refresh

7 replies
Last updated: Feb 26, 2021
Hi! I have a problem when using tabs plugin. When I copy paste code into the field, it's not visible until I refresh the page. Is there a way of fixing it? Thanks! 🙂
AI Update

This is a known issue with the sanity-plugin-tabs plugin! The problem you're experiencing where pasted content isn't visible until you refresh is related to how the plugin handles its implementation.

According to the discussion thread on this exact issue, the solution is to properly nest your fields according to the plugin's documentation. Looking at your code example, it appears you're not following the recommended structure.

The sanity-plugin-tabs documentation requires that all fields be nested inside a tabs object. Your current implementation has the inputComponent: Tabs at the document level, but the fields aren't properly nested within a tabs structure.

The fix: Nest all your fields inside a new object and move the Tabs input component and fieldsets into that object as well. In other words, you need to nest everything one level deeper. This isn't actually a bug with the plugin - it's about following the documented implementation pattern. When fields aren't nested properly, the plugin can exhibit strange behavior like the copy-paste visibility issue you're experiencing.

Alternative consideration: If you're starting a new project or can refactor, you might want to consider using Sanity's native Field Groups feature instead. Field Groups is the built-in way to organize fields into tabs in Sanity Studio, and it doesn't require a plugin. It's been part of Studio since v2.24.0 and provides a cleaner, officially supported way to create tabbed interfaces without affecting your data structure. You can assign fields to groups like this:

defineField({
  name: 'slug',
  type: 'slug',
  group: 'seo', // Assigns this field to the 'seo' group
})

This native approach tends to be more reliable and is actively maintained as part of the core Studio experience.

Show original thread
7 replies
import { MdNoteAdd as icon } from "react-icons/md"
import Tabs from "sanity-plugin-tabs"

export default {
  name: "blogPost",
  title: "Blog Posts",
  type: "document",
  icon,
  inputComponent: Tabs,
  fieldsets: [
    { name: "main", title: "Main", options: { sortOrder: 10 } },
    { name: "seo", title: "SEO", options: { sortOrder: 20 } },
  ],
  fields: [
    {
      name: "main",
      title: "Main",
      type: "blogPostMain",
      fieldset: "main",
    },
    {
      type: "seoOptions",
      name: "seo",
      title: "SEO",
      fieldset: "seo",
    },
  ],
  preview: {
    select: {
      title: "main.title",
      media: "main.featuredImage",
    },
    prepare({ title, media }) {
      return {
        title,
        media,
      }
    },
  },
}
Can this be related to the title being pulled from main? Is this a wrong way of doing this?
Hi User, thanks for reporting this! It might be a bug in the tabs plugin, as we've also seen a similar issue recently with images being pasted into a field inside of a tab. We'll tag the author and keep you posted 🙂
Awesome, thank you! 🙂
As a workaround, what you could try is nesting all your fields inside another (new) object, and moving the Tabs input component and fieldsets into it as well. Afterwards, place that object in the document. In other words, nest everything one level deeper.
Will try that, thank you very much 🙂
Hi! Also using the tabs plugin, the documentation actually calls for everything to be nested inside of a tabs object, which, unless I’m reading the code example wrong, you’re not doing, I’ve seen reports of strange behaviour when not nesting it that way, so as User said that should probably fix your issues (and since this code example is not adherent to the documentation I don’t think this should even be regarded as a bug with the plugin)

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?