Disabling Array Item's Panel Options (Duplicate, Add Item Before/After)

[maximilian-zimmerer]

Hi All,

I'm currently working on a custom input component for an array field, which limits the user to adding no more than a single item by disabling the "Add Item" button.

I successfully implemented this functionality following this template.

Once an array item has been added, is it possible to remove the following actions from its options panel?

• Duplicate
• Add Item Before
• Add Item After

Although I'd like to retain the option to delete the array item, all other actions would allow users to add new items to the array, which I intend to avoid.

Thank you in advance, I appreciate the help 🙏

My code for the custom input component and its implementation in a schema:

projectCover.tsx (Custom Input Component)

import {
  ArrayOfPrimitivesInputProps,
  ArrayOfPrimitivesFunctions,
  ArrayInputFunctionsProps,
  ArraySchemaType,
} from 'sanity'

function ArrayFunctions(
  props: ArrayInputFunctionsProps<string | number | boolean, ArraySchemaType>
) {
  const total = props?.value?.length || 0
  if (total >= 1) return null
  return <ArrayOfPrimitivesFunctions {...props} />
}

export default function projectCover(props: ArrayOfPrimitivesInputProps) {
  return props.renderDefault({...props, arrayFunctions: ArrayFunctions})
}

project.ts (Project Schema)

{
  type: 'array',
  name: 'cover',
  title: 'Cover',
  options: {
    sortable: false,
  },
  of: [{type: 'media_image'}, {type: 'media_video'}],
  components: {input: projectCover},
}

[joenemec]

@maximilian-zimmerer Did you ever figure this out? I'm trying to do the exact same thing.

[troymcginnis]

@maximilian-zimmerer Any update?

[babyPrince]

@maximilian-zimmerer @troymcginnis @joenemec
Bumped into the same issue because I needed a predefined, order-able array but non editable fields to control the home page sections order and came up with a little hacky solution. It should do for the time being 🤷‍♂️

// schemas/singletons/home.js
// disable readOnly, make your list, reenable readOnly
{
  name: 'sectionsOrder',
  type: 'array',
  of: [
    {
      name: 'section',
      type: 'object',
      fields: [
        {
          name: 'title',
          type: 'string',
          readOnly: true,
        },
        {
          name: 'id',
          type: 'string',
          readOnly: true,
        },
      ],
    },
  ],
  components: {
    input: CustomArrayInput,
  },
},

and

// schemas/components/CustomArrayInput.js

function DisabledArrayFunctions(props) {
  return <div />
}

export default function CustomArrayInput(props) {
  return (
    <div className="custom-array-input">
      <style>
        {`
          .custom-array-input button[data-ui="Button"][aria-label="Add item"] {
            display: none !important;
          }

          .custom-array-input button[data-ui="MenuButton"] {
            display: none !important;
          }
        `}
      </style>
      {props.renderDefault({
        ...props,
        arrayFunctions: DisabledArrayFunctions,
      })}
    </div>
  )
}

[troymcginnis]

Not a bad solution. It does prevent being able to remove components since the Remove button becomes hidden from the UI. Since the popup menu is portalled, it might be hard to work around this limitation.

[babyPrince]

Good point! I needed just the order functionality and never thought about that aspect.