slugField in sidebar??

[orchid sun]

Any reason why my slug field appears in the sidebar (like setting admin.position = "sidebar") unless I explicity override it to appear normally?

import { type CollectionConfig, slugField } from "payload";

export const Themes: CollectionConfig<"themes"> = {
    slug: "themes",
    access: {
        read: () => true,
    },
    admin: {
        useAsTitle: "name",
        group: "Inhoud",
        defaultColumns: ["name", "icon"],
        enableListViewSelectAPI: true,
    },
    fields: [
        {
            name: "name",
            type: "text",
            required: true,
        },
        slugField({
            useAsSlug: "name",
            required: true,
            overrides(field) {
                field.admin ??= {};
                field.admin.position = undefined;
                return field;
            },
        }),
        {
            name: "icon",
            type: "upload",
            relationTo: "documents",
            required: true,
            filterOptions: {
                mimeType: {
                    contains: "image",
                },
            },
        },
    ],
};

[bronze tangle]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Troubleshooting - Dependency mismatches - Fixing dependency issues
• Date Field - Admin Options - Display Format and Picker Appearance
• Text Field - Slug Field
• Troubleshooting - Dependency mismatches - Fixing dependency issues - If the error persists
• Sentry Plugin - Core Features

[orchid sun]

This isn't happening inside tabs for some reason

Resetting position like so:

slugField({
  useAsSlug: "name",
  required: true,
  position: undefined,
}),

still puts it in the sidebar.

I have to explicitly override it

I just tested it on some other collections that have slug inside tab, moving it out of a tab field puts it in the sidebar, otherwise it just works normally.

[ember hedge]

Yeah this seems to be an oversight by payload. In the source code you find, that they default assign 'sidebar' which is problematic, since position: undefined will be overriden by this. Furthermore there is no alternative valid value besides 'sidebar' for this property to reset it.

Your safest bet for now would be to use the override. Nothing would break, as of now, but you could make your override a bit more future proof like this:

slugField({
  overrides: (field) => ({ ...field, admin: { ...(field.admin ?? {}), position: undefined } }),
}),

or

slugField({
  overrides: (field) => {
    delete field.admin?.position
    return field
  },
}),

Just in case admin would have any other properties on it than just position, that you wouldn't want to omit.

EDIT: nevermind i missed your nullish coalescing assignment which of course works too 🙂

slugField source:
https://github.com/payloadcms/payload/blob/main/packages/payload/src/fields/baseFields/slug/index.ts

[orchid sun]

Thank you for the expanation, looks like an oversight somewhere. I'm confused why they would assign it to the siderbar by default.

Would it be fine to create an issue for this?

[ember hedge]

I think having a default of 'sidebar' there is a fine design choice. Plus this seems to be an experimental field and you could instead just create your own slug field.

However I'm looking into how to contribute to the payload package right now. The fix should be pretty easy:

export const slugField: SlugField = (options = {}) => {
  const {
    name: slugFieldName = 'slug',
    checkboxName = 'generateSlug',
    fieldToUse,
    localized,
    overrides,
    position: providedPosition,
    required = true,
    slugify,
    useAsSlug: useAsSlugFromArgs = 'title',
  } = options

  const useAsSlug = fieldToUse || useAsSlugFromArgs

  const position = 'position' in options ? providedPosition : 'sidebar'