Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
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?