How to Restrict "Admin" Role Selection Based on User's Role in Payload CMS?

[gorillah]

How can I prevent the current logged in user that does not have the role admin from having the role option admin to be selected?

{
      name: 'roles',
      saveToJWT: true,
      type: 'select',
      hasMany: true,
      required: true,
      options: [
        { label: 'User', value: 'user' },
        { label: 'Agent', value: 'agent' },
        { label: 'Broker', value: 'broker' },
        { label: 'Admin', value: 'admin' }, // This option only available to admin to select, It will be hidden if is not admin role
      ],
      access: {
        read: createFieldRoleAccess(['admin', 'broker']),
        create: createFieldRoleAccess(['admin', 'broker']),
        update: createFieldRoleAccess(['admin', 'broker']),
      },
    },
}

[gorillah]

I figured it out if someone a better way to accomplish this please let me know.

Create a custom select component

'use client'

import * as React from 'react'
import { SelectInput, useAuth, useField } from '@payloadcms/ui'

type CustomSelectProps = {
  path: string
  options: {
    label: string
    value: string
  }[]
}

const CustomSelectComponent: React.FC<CustomSelectProps> = ({ path }) => {
  const { value, setValue } = useField<string>({ path })
  const { user } = useAuth()

  const [options, setOptions] = React.useState<{ label: string; value: string }[]>([
    { label: 'Agent', value: 'agent' },
  ])

  React.useEffect(() => {
    if (user?.roles.includes('admin')) {
      setOptions((prevOptions) => [...prevOptions, { label: 'Admin', value: 'admin' }])
    }
  }, [])

  return (
    <div>
      <label className="field-label">Role</label>
      <SelectInput
        path={path}
        name={path}
        options={options}
        value={value}
        hasMany={true}
        required={true}
        onChange={(e) => {
          if (Array.isArray(e)) {
            setValue(e.map((option) => option.value).join(', '))
          } else {
            setValue(e.value)
          }
        }}
      />
    </div>
  )
}

export default CustomSelectComponent

{
      name: 'roles',
      saveToJWT: true,
      required: true,
      type: 'text',
      admin: { components: { Field: '/fields/customSelectComponent' } },
      access: {
        read: createFieldRoleAccess(['admin', 'broker']),
        create: createFieldRoleAccess(['admin', 'broker']),
        update: createFieldRoleAccess(['admin', 'broker']),
      },
}