Objects nested in an object with the tab input will loose their title when inside an array (modal).

Screenshots

See how the same schema produces different results with and without the tabs component.

Without

Note the title Inner Object 1

With

Inner Object 1 is missing in the UI

Schema

import Tabs from 'sanity-plugin-tabs';

export default {
  name: 'nested',
  type: 'document',
  fields: [
    {
      name: 'array',
      type: 'array',
      of: [
        {
          name: 'outerObject',
          type: 'object',
          fieldsets: [
            { name: 'main', title: 'Main Fieldset' },
            { name: 'aside', title: 'Aside Fieldset' }
          ],
          inputComponent: Tabs,
          fields: [
            {
              /*
              This object title will not be displayed
              when using the tab input.
              */
              name: 'innerObject1',
              type: 'object',
              fieldset: 'main',
              fields: [
                {
                  name: 'innerObject2',
                  type: 'object',
                  fields: [
                    {
                      name: 'innerObject2Child',
                      type: 'string'
                    }
                  ]
                },
                {
                  name: 'innerObject1Child',
                  type: 'string'
                }
              ]
            },
            {
              name: 'dummy',
              type: 'string',
              fieldset: 'aside'
            }
          ]
        }
      ]
    }
  ]
};

Packages

{
  "name": "sanity-bug",
  "private": true,
  "version": "1.0.0",
  "description": "",
  "main": "package.json",
  "author": "Niklas May",
  "license": "UNLICENSED",
  "scripts": {
    "start": "sanity start",
    "test": "sanity check"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/base": "^2.15.1",
    "@sanity/components": "^2.14.0",
    "@sanity/core": "^2.15.0",
    "@sanity/default-layout": "^2.15.1",
    "@sanity/default-login": "^2.15.0",
    "@sanity/desk-tool": "^2.15.2",
    "@sanity/vision": "^2.15.0",
    "prop-types": "^15.6",
    "react": "^16.2",
    "react-dom": "^16.2",
    "sanity-plugin-tabs": "^2.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-react": "^7.24.0",
    "prettier": "^2.3.2"
  }
}

Upgrading Sanity to v2.1.x causes the desk to crash when changing tabs.

Hi,

I tried using the plugin by doing the following:

1. sanity install tabs
2. adding a file frontpage.js to /schemas and to the schema.js file with the content of the example from your readme
3. sanity start
   Expected: Sanity starts and a document "Frontpage" is shown in the left side menu of the Desk
   Actual: compiler warnings and no "Frontpage" menu item is shown

Warning in ./node_modules/@sanity/css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]&importLoaders=1&sourceMap!./node_modules/postcss-loader/lib??ref--1-oneOf-1-2!./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/ObjectInput/styles/UnknownFields.css
(Emitted value instead of an instance of Error) postcss-custom-properties: /home/louise/workspace/jfm-sanity/node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/ObjectInput/styles/UnknownFields.css:9:3: variable '--line-height-small' is undefined and used without a fallback
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/ObjectInput/styles/UnknownFields.css 2:14-248 21:1-42:3 22:19-253
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/InvalidValueInput/InvalidValueInput.js
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/InvalidValueInput/index.js
 @ ./node_modules/sanity-plugin-tabs/lib/index.js
 @ ./app/schemas/frontpage.js
 @ ./app/schemas/schema.js (part:@sanity/base/schema)
 @ ./node_modules/@sanity/default-layout/lib/util/getNewDocumentModalActions.js
 @ ./node_modules/@sanity/default-layout/lib/components/DefaultLayout.js
 @ ./node_modules/@sanity/default-layout/lib/components/DefaultLayoutContainer.js (part:@sanity/base/root)
 @ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
 @ ./node_modules/@sanity/server/lib/browser/entry-dev.js
 @ multi ./node_modules/normalize.css/normalize.css ./node_modules/@sanity/server/lib/browser/entry-dev.js

Warning in ./node_modules/@sanity/css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]&importLoaders=1&sourceMap!./node_modules/postcss-loader/lib??ref--1-oneOf-1-2!./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/Warning.css
(Emitted value instead of an instance of Error) postcss-custom-properties: /home/louise/workspace/jfm-sanity/node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/Warning.css:11:3: variable '--line-height-small' is undefined and used without a fallback
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/Warning.css 2:14-230 21:1-42:3 22:19-235
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/Warning.js
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/InvalidValueInput/InvalidValueInput.js
 @ ./node_modules/sanity-plugin-tabs/node_modules/@sanity/form-builder/lib/inputs/InvalidValueInput/index.js
 @ ./node_modules/sanity-plugin-tabs/lib/index.js
 @ ./app/schemas/frontpage.js
 @ ./app/schemas/schema.js (part:@sanity/base/schema)
 @ ./node_modules/@sanity/default-layout/lib/util/getNewDocumentModalActions.js
 @ ./node_modules/@sanity/default-layout/lib/components/DefaultLayout.js
 @ ./node_modules/@sanity/default-layout/lib/components/DefaultLayoutContainer.js (part:@sanity/base/root)
 @ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
 @ ./node_modules/@sanity/server/lib/browser/entry-dev.js
 @ multi ./node_modules/normalize.css/normalize.css ./node_modules/@sanity/server/lib/browser/entry-dev.js

Hi,

I want to use this plugin for making a number of tabs, lets call them T1, T2 and T3.
The structure of the schemas are as follows:

1. Document X which has an object A and an object B, each object defined with "inputComponent: Tabs,"
2. Document Y which has an object A and an object C, each object defined with "inputComponent: Tabs,"
3. Document Z which has an object A, C and D, each object defined with "inputComponent: Tabs,"

I want the fields defined in objects A, B, C and D spread across the tabs, e.g. some fields from each object A, B, C and D on T1, some fields from each object on T2 etc.
My approach was to define the same fieldsets on all the object levels, but instead of having the fields gathered on the same tabs, I get a list of the objects with their own tabs, such that the tabs are shown multiple times.

I believe I can get the setup I want, by listing the fields on the document level, but that would mean I have to duplicate the fields in e.g. object A on both document X, Y and Z, which maintenance-wize is not optimal.

Is there a way to be able to re-use the objects and get the fields from different objects on the same tabs?

Hi,

I'm building next js application with sanity backend. When i run "npm run dev", it's erroring out with the following.

error - ./studio/node_modules/sanity-plugin-tabs/lib/tabs.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: studio/node_modules/sanity-plugin-tabs/lib/index.js

Next js - 11.0.0
Sanity - 2.10.5
Sanity-plugin-tabs - 2.0.1

When adding a basic number fields, 0 cannot be chosen as a number.

Warning: Failed prop type: The prop `focusPath` is marked as required in `Tabs`, but its value is `undefined`.

I'm on the latest and greatest sanity-plugin-tabs + latest and greatest sanity:

    "@sanity/base": "^1.149.8",
    "@sanity/cli": "^1.149.9",
    "@sanity/color-input": "^1.149.7",
    "@sanity/components": "^1.149.8",
    "@sanity/core": "^1.149.9",
    "@sanity/default-layout": "^1.149.8",
    "@sanity/default-login": "^1.149.7",
    "@sanity/desk-tool": "^1.149.8",

Issue occurred after updating the studio. Now only my last tab is active/visible, no way to see the other content in the tabs aside from arrange them in dev as a temp fix.

I just reverted my Sanity studio so that it continues to work.

My Working configuration:

    "@sanity/base": "1.148.5",
    "@sanity/cli": "1.148.6",
    "@sanity/color-input": "1.148.1",
    "@sanity/components": "1.148.5",
    "@sanity/core": "1.148.5",
    "@sanity/default-layout": "1.148.5",
    "@sanity/default-login": "1.148.1",
    "@sanity/desk-tool": "1.148.6",
    "sanity-plugin-tabs": "1.1.2",

I realize 1.1.2 is a few versions back but it does work :)

Let me know if there is anything else I can provide, I may also have time run it locally to see if I can figure out what's happening.

Additionally my studio is open source!

As the title suggests I experienced some odd layout issue when using this plugin where the margins between fields seems off.

Not sure there is a solution to this problem from the plugin, but running the command "sanity graphql deploy" creates an error
Schema: Lift anonymous object types. As the schema's input type must be "object" for the inputComponent: Tab to be accepted, I'm not sure there is much of a solution. I like the layout, but I'm not sure this plugin is for me, as I do need a graphql API for my project.

Putting content fields into tabs is indeed a huge improvement, but this module requires a unique schema structure to work.

1. Because of the extra layer in schema, you can't add tabs to a type with existing content. The "new" fields are all empty and the existing content becomes hidden.

2. If someone wants to remove this module their content is now stuck in a special schema that won't work with Sanity out of the box.

Error: Encountered anonymous inline object "content" for field/type "Frontpage". To use this field with GraphQL you will need to create a
top-level schema type for it. See https://docs.sanity.io/help/schema-lift-anonymous-object-type
In array

Nothing happens when clicking the Remove value button

Not sure if it's just me but here's what I notice:

issue: active tab goes off on other item
expected: active tab should be the first tab item

tried the versions 2.0.1 and 2.0.3

I have set up fieldsets on the target object and set the options for some to be columns: 2 just as I would have without the Tabs plugin. However, the targeted fields are still full-width. (Otherwise, the tabs seem to work fine).

Thank you.

Schema:

import Cloudinary from "part:sanity-plugin-asset-source-cloudinary/image-asset-source";
import Tabs from "sanity-plugin-tabs";

export default {
  title: "Facility Info",
  name: "facilityInfo",
  type: "object",
  inputComponent: Tabs,
  fieldsets: [
    { title: "Logo", name: "logo", options: { columns: 2 } },
    { title: "Address", name: "address" },
    { title: "Contact", name: "contact", options: { columns: 2 } },
  ],
  fields: [
    {
      title: "Full Logo",
      name: "fullLogo",
      type: "image",
      options: { sources: [Cloudinary] },
      fieldset: "logo",
    },
    {
      title: "Street Address",
      name: "streetAddress",
      type: "string",
      fieldset: "address",
    },
    {
      title: "Street Address 2",
      name: "streetAddress2",
      type: "string",
      fieldset: "address",
    },
    {
      title: "City",
      name: "city",
      type: "string",
      fieldset: "address",
    },
    {
      title: "State",
      name: "state",
      type: "string",
      options: {
        list: stateList,
      },
      fieldset: "address",
    },
    {
      title: "Zip",
      name: "zip",
      type: "string",
      fieldset: "address",
    },
    {
      title: "Phone",
      name: "phone",
      type: "string",
      fieldset: "contact",
    },
  ],
};

This is more of an enquiry / request for documentation rather than a code issue. I've been testing out this plugin, looks and works great and hugely improves the UX of our studio. However we have quite a bit of data belonging to fields which up until now have not been wrapped in an object and with the implementation of this plugin that data isn't automatically moved over

e.g. slug becomes tabs.slug, tabs.slug is empty and slug becomes an unknown field containing the pertinent data.

Is there a best practice for moving / "migrating" data from top level to inside a tabs wrapper? (and if not, any way of doing it without manually going through everything?)

When adding a boolean field, the boolean field never visually indicates the false selection. True works fine.

When using sanity-plugin-tabs, hidden fields--i.e., those defined with hidden set to true--are still displayed. Removing Tabs as the inputComponent immediately solves the issue.

Submitting tiny PR now...

If we have hidden fields with no fieldset such-as:

  {
    name: 'publishedAt',
    title: 'Published at',
    type: 'date',
    hidden: true,
    required: true,
  },

then an empty 'Other' tab gets created. Is it possible to have hidden fields ignored when generating the list of tabs?

I'm on version 2.0.1.

Thanks for the plugin :)

Hi,

I have two schema definitions:

1. simpleFields.js:
   export default { name: 'simpleFields', title: 'Simple product fields', type: 'object', fields: [ { name: 'title', title: 'Title', type: 'string', validation: Rule => Rule.required() }, ], }

2. testProduct.js
   export default { name: 'testProduct', title: 'Test product', type: 'document', fieldsets: [ { name: 'general', title: 'General' }, ], fields: [ { name: 'simpleFields', type: 'simpleFields', fieldset: 'general', }, ], }

When I add tabs to the testProduct as follows:
`import Tabs from 'sanity-plugin-tabs'

export default {
name: 'testProduct',
title: 'Test product',
type: 'document',
inputComponent: Tabs,
fieldsets: [
{ name: 'general', title: 'General' },
],
fields: [
{
name: 'simpleFields',
type: 'simpleFields',
fieldset: 'general',
},
],
}
`
i.e. I make the import and add "inputComponent: Tabs,", I can no longer enter text into the input field simpleFields.title.

Would also be better to use the same error icon as sanity (circled warning in red)

Hi — love this plugin, in fact I use it on most of my Sanity builds. Just wanted to let you know that Sanity's new conditional fields feature doesn't work within tabs. There's no error that I can see logged, the fields just don't hide correctly.

More info about conditional fields: https://www.sanity.io/docs/conditional-fields

Hi,

I am using the filterField prop on my project to show only certain fields (I have internationalization support on my site and I'm showing only the fields of the selected language).
In the latest version (from 1.1.5) it doesn't work anymore because the prop was not passed down anymore to the builder.

ref: #12

(Using up to date sanity libraries (1.149.17) and [email protected])

When using tabs, the error display is broken on inputs.
Errors are properly displayed on the top-right indicator but the inputs are not highlighted properly.

Current behavior:

Expected behavior:

For what I gathered it looks like when tab markers are built the path is wrong for some reason.
I pinpointed the issue, and apparently it comes from the trimming of child paths :

broken:

  getFieldMarkers = (fieldName) => {
    return this.props.markers
      .filter((marker) => PathUtils.startsWith([fieldName], marker.path))
      .map((marker) => ({
        ...marker,
        path: this.trimChildPath([fieldName], marker.path),
      }));
  };

works:

getFieldMarkers = (fieldName) => {
    return this.props.markers.filter((marker) =>
      PathUtils.startsWith([fieldName], marker.path)
    );
  };

However I'm a bit confused about why this trimming was happening in the first place. Legacy code from an older version maybe? I'm just starting to grasp sanity's custom components, so I'd love any input on this.

I can submit a PR anytime.

Hi,

I have a document with reference to another document, whenever I was using the read-only attribute it's not allow me to select the value.

Here is an example:

import Tabs from 'sanity-plugin-tabs'
import { MdHomeWork } from 'react-icons/md'

export default {
    name: "program",
    type: "document",
    title: "Programs",
    icon: MdHomeWork,
    fields: [
        {
            name: 'details',
            type: 'object',
            inputComponent: Tabs,

            fieldsets: [
                { name: 'setup', title: 'Setup', options: { sortOrder: 10 } },
                { name: 'venue', title: 'Venue', options: { sortOrder: 20 } }
            ],
            options: {
                layout: 'object',
            },
            fields: [
                {
                    name: 'programTitle', 
                    type: 'string', 
                    title: 'Program Title',
                    fieldset: "setup",
                    validation: Rule => Rule.required(),
                },
                {
                    name: 'description',
                    title: 'Program Description',
                    type: 'reference',
                    to: [
                        {
                            type: 'programDescription'
                        }
                    ], 
                    options: {
                        disableNew: true,
                    },
                    fieldset: "setup",
                    validation: Rule => Rule.required(),
                    readOnly: false
                },
            ]
        },
        
    ],
    
}

When I do this, the dropdown is showing the values but when I selected any, it's not set to the field.
If I remove read-only it works fine.

I'm sorry for being super vage, but I'm kinda in a hurry right now so I can't investigate deeply, but wanted to report nevertheless. After some sanity upgrade business some fields including body block annotations and an Array of references stopped working, so I had to disable the Tabs input component (just commented out the inputComponent = Tabs basically), which makes everything work again.

See this quick clip for example:
sanity-tabs-issue.mov.zip