Skip to content
👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events
Get help on Slack

Issue with "Create New" button not appearing for array type reference to category in Sanity Studio.

18 replies
Last updated: Feb 9, 2022
Can a type reference of categories linked to the page. Also have a Create new if this is a array of multiple categories? I only see this button when you pick a single category.
Feb 9, 2022, 9:56 AM
You can create a tag schema and add the refference to the schema type named page. Where you would be able to directly select one tag, or create a new one + button. If that makes sense?
But I have noticed when I want to have the same behaviour a reference but only difference that type is array. You can select like multiple tags but not create one.

Feb 9, 2022, 6:53 PM
What version of the Studio are you on? You should be able to create a new reference from the array input. Like so:Or am I misunderstanding you?
Feb 9, 2022, 6:58 PM
Latest actually mind sharing the part? I am using the OF and type array and reference tag
Feb 9, 2022, 6:59 PM
This?
{
      name: 'tags',
      title: 'Tags',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'category' }] }],
}
Feb 9, 2022, 7:00 PM
Correct! but the create new is missing if i use type array very weird
Feb 9, 2022, 7:02 PM
Can you run 
sanity versions
and share the output?
Feb 9, 2022, 7:27 PM
user M

Take a look at my screenshots
Feb 9, 2022, 7:51 PM
Only able to search item but not add a new one
user M
Feb 9, 2022, 7:52 PM
The funny part for the Author schema I see the Create new button but for instance categories I don’t.

{
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "friend" },
    },

    {
      name: "categories",
      title: "Categories",
      type: "reference",
      to: { type: "category" },
      // type: "array",
      // of: [{ type: "reference", to: { type: "category" } }],
    },

Feb 9, 2022, 8:03 PM
The funny part for the Author schema I see the Create new button but for instance categories I don’t.

{
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "friend" },
    },

    {
      name: "categories",
      title: "Categories",
      type: "reference",
      to: { type: "category" },
      // type: "array",
      // of: [{ type: "reference", to: { type: "category" } }],
    },

Feb 9, 2022, 8:03 PM
user M
Seems like if you want the “Create New” Button to appear you need to have a “slug” type otherwise It won’t work. Should it work like that ?
Feb 9, 2022, 8:16 PM
Have you clicked the 
Add Item
button?
Feb 9, 2022, 8:26 PM
category.js (doesn’t work as reference):

import React from "react";

import StringWithLimits from "../../components/StringWithLimits";

import { Tag } from "phosphor-react";

import { icon } from "../../lib/helpers";

const { color, weight, size } = icon;

export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      type: "string",
      title: "Title",
      inputComponent: StringWithLimits,
      validation: (Rule) => Rule.max(20),
    },
    {
      name: "description",
      type: "text",
      title: "Description",
    },

    {
      title: "Category Color",
      name: "colors",
      type: "colorlist",
      options: {
        tooltip: true,
        borderradius: {
          outer: "100%",
          inner: "100%",
        },
        list: [
          { title: "Red", value: "#CD113B" },
          { title: "Teal", value: "#88c6db" },
          { title: "Navy", value: "#001f3f" },
          { title: "Gray", value: "#423F3E" },
          { title: "Beige", value: "#E5B299" },
          { title: "Purple", value: "#A03C78" },
          { title: "Pink", value: "#FF94CC" },
          { title: "Green", value: "#2ECC40" },
          { title: "Yellow", value: "#ECD662" },
        ],
      },
    },
  ],

  preview: {
    select: {
      title: "title",
    },
    prepare({ title = "Undefined" }) {
      return {
        title,
        media: <Tag color={color} weight={weight} size={size} />,
      };
    },
  },
};
case.js does work


import React from "react";

import { Suitcase } from "phosphor-react";

import StringWithLimits from "../../components/StringWithLimits";

import { icon } from "../../lib/helpers";

const { color, weight, size } = icon;

export default {
  name: "case",
  title: "Cases",
  type: "document",
  icon: () => <Suitcase color={color} weight={weight} size={size} />,
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
      inputComponent: StringWithLimits,
      validation: (Rule) => Rule.max(100),
    },

    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "caseManager",
      title: "Case Manager",
      type: "reference",
      to: { type: "friend" },
    },
    {
      title: "Theme",
      name: "theme",
      type: "array",
      of: [{ type: "reference", to: { type: "theme" } }],
    },
    {
      title: "Expertise",
      name: "expertise",
      type: "array",
      of: [{ type: "reference", to: { type: "expertise" } }],
    },
    {
      name: "body",
      title: "Body",
      type: "blockContent",
    },
    {
      name: "excerpt",
      type: "blockExcerpt",
      title: "Excerpt",
    },
    {
      name: "featuredImage",
      title: "Featured image",
      type: "imageWithAltText",
    },
  ],

  preview: {
    select: {
      caseTitle: "title",
      image: "featuredImage",
    },

    prepare({ caseTitle = "Untitled", image }) {
      return {
        title: caseTitle,
        media: image ? (
          image
        ) : (
          <Suitcase color={color} weight={weight} size={size} />
        ),
      };
    },
  },
};
“category” not working “case” works.

{
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
Am I crazy or am I doing something wrong?
Feb 9, 2022, 8:26 PM
user M
Yes, I did shows up on “case” type but “category” not.
Feb 9, 2022, 8:27 PM
I'm not sure! I'll try to reproduce but it will take me a bit!
Feb 9, 2022, 8:29 PM
user M
Works basically with almost all schema types but category just not working crazy!
Feb 9, 2022, 8:31 PM
Simplified:

category.js
export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
  ],
};

case.js
{
      title: "Categories",
      name: "categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
The “+ Create New” Button won’t shop up. I am really confused here.
Feb 9, 2022, 8:58 PM
Simplified:

category.js
export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
  ],
};

case.js
{
      title: "Categories",
      name: "categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
The “+ Create New” Button won’t shop up. I am really confused here.
Feb 9, 2022, 8:58 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?