XD: <Select> not rendering any options

Adobe XD UXP Plugin API
, , ,
1

I am having an issue with rendering <option> components in a <select> dropdown. The use case is that I’m trying to render a list of layers present in the selected Artboard.

  • On selection of the first Artboard (#1) <select> and <option>s look good in the UI and DOM (attachments: 1_unselected_options.jpg & 1_selected options.jpg)
  • If I select another Artboard (#2), the <select> dropdown also looks good good in the UI and DOM (attachments: 2_unselected_options.jpg & 2_selected options.jpg).
  • But when I re-select the first artboard, the <select> dropdown UI does not render anything - but the proper data does appear to be shown in the DOM (attachments: 1_unselected_no_options.jpg & 1_selected_no_options.jpg)

The fact that the proper data appears in the DOM makes me wonder why the <select> component is not properly displaying the list - the logic that populates the elements shown in the DOM is working properly.

Have been looking into this for a few hours without many good ideas or explanations - interested in hearing any ideas or clues.

Thank you!

@kerrishotts React_Select_UI_DOM.zip (101.6 KB)

2

Can you share some code relating to how you’re rendering out the <select> and <options> with React?

3

Here’s a sample code snippet.

<select disabled={disabled} value={value} onChange={onChange}>
    <option value={-1} key={-1}>Placeholder</option>
    {
        results.map((res, idx) => {
            return (
                <option value={res.id} key={idx}>{res.name}</option>
            );
        })
    }
</select>

Variables:
results : array of objects, which might look something like [{id: '123', name: 'Result 1'}] (this array is built from layers in a selected artboard, where ‘id’ is the .guid property of the layer, and ‘name’ is the .name property of the layer).

disabled : this prop is a boolean, not relevant to this issue

value : this prop is the ‘id’ of the selected option, updated by the onChange method.

onChange : when an option is selected, the value variable is updated.

Please let me know if you’d like any additional information. Thanks!