Issue with Reading Dropdown Config in Property Editor (Umb.PropertyEditorUi.Dropdown)

[rsteinbakk (Roger Steinbakk)]

I am encountering an issue when trying to use a dropdown in a custom property editor in Umbraco.

Other examples with toggle and textbox (like the examples from docs: Adding configuration to a Property Editor | Umbraco CMS) works fine!

The dropdown is defined in the umbraco-package.json file under the config section, but it fails to load properly in the Backoffice. The error occurs when the dropdown configuration is being read, and it seems related to the config.items structure.
Here is the relevant part of my umbraco-package.json:

{
  "alias": "fileTypeSelection",
  "label": "Select Mode",
  "description": "Choose a mode for file uploads",
  "propertyEditorUiAlias": "Umb.PropertyEditorUi.Dropdown",
  "config": {
    "items": [
      { "value": "imagesandvideos", "label": "Images and Videos" },
      { "value": "documents", "label": "Documents" },
      { "value": "audio", "label": "Audio" }
    ]
  }
}

When I try to use this dropdown in the Backoffice, I get the following error in the console:
index.js:3 Uncaught TypeError: Spread syntax requires …iterable[Symbol.iterator] to be a function
at new g (property-editor-config-collection.class.ts:10:3)
at Object.next (property.context.ts:128:42)
at t.next (index.js:3:3083)
at r._next (index.js:3:2754)
at r.next (index.js:3:2403)
at index.js:3:6636
at M (index.js:3:2155)
at r.next (index.js:3:6431)
at r.next (index.js:3:9186)
at UmbArrayState.setValue (deep-state.js:40:27)

← this problem also occurs if the config property (and children) is empty. So it is probably looking for something that it doesen’t find right now.

I am not sure, but the error might originate from the UmbPropertyEditorConfigCollection class, specifically in the constructor:

export class UmbPropertyEditorConfigCollection extends Array<UmbPropertyEditorConfigProperty> {
    constructor(args: UmbPropertyEditorConfig) {
        super(...args);
    }
}

[Ambertvu (Ambert van Unen)]

I’ve been spending 2 nights on this last week, could not get it to work, definitly monitoring this

[greystate (Chriztian Steinmeier)]

Hi Roger,

I found this thread where Lee explains it, and got it working using this slightly changed syntax:

"config": [{
  "alias": "items",
  "value": [
    { "value": "imagesandvideos", "name": "Images and Videos" },
    { "value": "documents", "name": "Documents" },
    { "value": "audio", "name": "Audio" }
  ]
}]

Hope that helps!

/Chriztian

[rsteinbakk (Roger Steinbakk)]

@greystate

"config": [{
  "alias": "items",
  "value": [
    { "value": "imagesandvideos", "name": "Images and Videos" },
    { "value": "documents", "name": "Documents" },
    { "value": "audio", "name": "Audio" }
  ]
}]

Amazing! Thank you Chriztian. Have a blessed day.