Hi, I’m currently trying to create a single select element using AUI in a gadget that I’ve been creating. However when I attempt to use AJS’s jQuery calls to create the elements dynamically, the options for the select do not get populated until after the select element has already created the input element. This means that when I append the options, they do not get added to the single select menu.
The JS looks something like this:
var form = AJS.$("<form/>", {"class": "aui"});
var p = AJS.$("<p/>");
form.append(p);
var select = AJS.$("<aui-select/>");
p.append(select);
select.attr({"id": "select", "name": "week-picker", "placeholder": "Choose a time period"});
var option = AJS.$("<aui-option/>"); option.html(label);
select.append(option)
When this is produced in the gadget the html looks like this:
<form class="aui">
<p>
<aui-select resolved="" id="select" name="week-picker" placeholder="Choose a time period" tabindex="-1">
<input type="text" class="text aui-alignment-target aui-alignment-abutted aui-alignment-abutted-left aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left" autocomplete="off" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" id="select-input" placeholder="Choose a time period" aria-controls="aui-uid-1" aria-activedescendant="null">
<select name="week-picker"></select>
<datalist>
<!-- content {"defaultContent":"","selector":"aui-option"} --><!-- /content -->
</datalist>
<button class="aui-button" role="button" tabindex="-1" type="button" resolved="" aria-controls="aui-uid-1"></button>
<div class="aui-select-status assistive" aria-live="polite" role="status"></div>
<aui-option resolved="">7/2/2018 to 7/8/2018</aui-option>
<aui-option resolved="">7/9/2018 to 7/15/2018</aui-option>
<aui-option resolved="">7/16/2018 to 7/22/2018</aui-option>
</aui-select>
</p>
</form>
As you can see the aui-option elements do not appear where they are meant to. Is there a way to fix this