Using AJS.$ to create AUI select options

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

Nevermind, I managed to get it to show up, however the css styling for aui is not showing up

Hi @neil.sonnenberg,

I’ve looked through the source code and test cases for AUI’s select element. It would appear that adding an <aui-option> element to an already-created <aui-select> element won’t work; the <aui-option> elements are only discovered and placed correctly when they’re present in the <aui-select> element upon creation of the <aui-select> element. This seems pretty weird, so I’ve raised a bug against AUI here: https://ecosystem.atlassian.net/browse/AUI-4832

In the meantime, you may have already done this, but the short-term solution seems to be creating the <aui-option> and <aui-select> elements as a string of HTML: https://codepen.io/chrisdarroch/pen/NzVZxX

I’m not sure what you mean by “the CSS styling for AUI … not showing up”, though. Can you show me what you mean, either through a codepen, or a screenshot?

Cheers,
Daz

Your last comment and confusion is probably a result of poor explanation on my part. I just meant that the aui element was not being rendered as an aui element and this was because of the options not being in the select.

Your solution makes a lot of sense and I think I will attempt something like this.

Thanks,
Neil