Conditional options for Select field

[thgh]

I have a Select field with conditional options (see below). And it works great! Except for one thing, there is an error in the Listview:

react-dom.development.js:86 Warning: Encountered two children with the same key, `subtype`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

export const type: Field[] = [
  {
    name: 'subtype',
    type: 'select',
    options: [ { value: 'a1', label: 'a1' } ],
    admin: { condition: (data: Page) => data.type === 'a' },
  },
  {
    name: 'subtype',
    type: 'select',
    options: [ { value: 'b1', label: 'b1' } ],
    admin: { condition: (data: Page) => data.type === 'b' },
  },
  {
    name: 'subtype',
    type: 'select',
    options: [ { value: 'c1', label: 'c1' } ],
    admin: { condition: (data: Page) => data.type === 'c' },
  },
  // Extra select with all options so that Typescript types include all options, but condition: false as we never want to show this.
  {
    name: 'subtype',
    type: 'select',
    options: [ 
      { value: 'a1', label: 'a1' },
      { value: 'b1', label: 'b1' },
      { value: 'c1', label: 'c1' }
    ],
    admin: { condition: () => false },
  },
]

[Prantoe]

hai @thgh I tried to do what you demonstrated, but it didn't work for me.

[thgh]

Perhaps because of this typo:

- admin: { condition: false },
+ admin: { condition: () => false },

Btw, I'm on Payload 1

[blobmold]

I am getting a DuplicateFieldName: A field with the name was found multiple times on the same level. Field names must be unique. error. Any way to fix this?

[thgh]

I found another (convoluted) way: add a class to document.body with the role of the user, then add a css rule that hides nth dropdown option:

.role-user .react-select .rs__option:nth-child(5) { display: none }

Not recommended though!