Community
Products
Jira
Questions
How to handle more options in aui-select

How to handle more options in aui-select

Hello

I am using aui library to display some fields in my forms. Everything was fine, until number of options in aui-select has increased. Now, selects are acting strangely:

I don't know why, some of my options are not displayed in dropdown. Here is my code in velocity:

<aui-select placeholder="Select assignee" name="assignee">
  #foreach( $userName in $usersNames )
     <aui-option value="${userName}"
        #if($defaultAssignee == $userName)
          selected
        #end
     >$userName</aui-option>
  #end 
</aui-select>

It looks like it's occuring randomly, sometimes options are displayed in dropdown, sometimes not

2 answers

0 votes

I had the same issue, however after troubleshooting I was able to figure out why this happened. So may be useful for people having same issues in future.

One of the option values was an empty string and aui is messing up the output when there are any blank values. I had to look for null or empty records in my code and was able to fix this issue.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

Hi @Adrian Kaczmarek,

Are you changing the values in the control via JavaScript, or only Velocity?

There's a bit more info we'll likely need to understand what's going on here.

What product are you building for? What version is it?
What version of AUI are you using? Check the `data-aui-version` attribute value on the `<body>` tag to find out.
Where in the product are you rendering this select to? Is it rendered statically to a page? Is it inside a Dialog? Is it rendered to a part of the DOM that gets re-created via AJAX or React?
Can you copy-paste the HTML in the browser when the control isn't rendering properly? I think that will be enlightening.
Can you copy-pate the HTML in the browser when the control is working properly? This will help for contrasting with the problematic HTML.

My current guess is that one of your user's names is not HTML safe, and the markup in the browser is essentially being XSS'd. Velocity is a general-purpose templating language, and offers no default escaping of HTML plaintext or attribute values. You will need to ensure the values are properly sanitised before you render them.

Does your velocity template have the following at the top of the file?

#enable_html_escaping()

If it doesn't, add that and see if the problem persists.

If the problem still exists, we'll look at the HTML that's generated and see if there's something obviously wrong.

Also, to get more timely answers to development questions, I'd recommend you ask in our developer community: http://community.developer.atlassian.com

Cheers,

Daz

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi!

I'm not sure if this ever got resolved but I have hit the same issue as well. My velocity template is almost identical to the example provided above and is a simple `aui-select` with a `foreach` generating a large number of `aui-options` (custom fields in my case).

<aui-select id="custom-field-selector" class="medium-long-field" name="customFieldId" placeholder="Search custom field">
    #foreach($customField in $customFields)
        <aui-option value="$customField.getIdAsLong()">$customField.getFieldName()</aui-option>
    #end
</aui-select>

The generated HTML looks fine and resembles what we would expect:

<aui-select>
    <aui-option value="1">Item 1</aui-option>
    <aui-option value="2">Item 2</aui-option>
    ...
    <aui-option value="2000">Item 2000</aui-option>
</aui-select>

However the generated AUI single select looks something like this:

<aui-select>
    <input type="text" class="text" autocomplete="off" role="combobox" id="selector-input" placeholder="Search fields">
    <select name="customFieldId"></select>
    <datalist>
        <!-- content {"defaultContent":"","selector":"aui-option"} -->
        <aui-option value="1" resolved="">Item 1</aui-option>
        <aui-option value="2" resolved="">Item 2</aui-option>
        <aui-option value="3" resolved="">Item 3</aui-option> <--------- properly rendered aui-option items
        ...
    </datalist>
    <button class="aui-button" role="button" tabindex="-1" type="button" resolved=""></button>
    <div class="aui-popover aui-layer" role="listbox" data-aui-alignment="bottom left" id="aui-uid-2">
        <ul class="aui-optionlist" role="presentation"></ul>
    </div>
    <div class="aui-select-status assistive" role="status"></div>
    <aui-option value="1908" resolved="">Item 1908</aui-option>
    <aui-option value="1909" resolved="">Item 1909</aui-option>
    <aui-option value="1910" resolved="">Item 1910</aui-option> <--------- improperly rendered aui-option items
    ...
</aui-select>

Please note that some `aui-option` elements are left outside the `datalist` element and therefore are not included in the dropdown list. Instead they "overflow" the single select dropdown and end up being displayed on the page as shown in the screenshot posted by Adrian.

As a workaround, I have added some JavaScript that moves these remaining `aui-option` elements underneath the `datalist` element, but this leaves the items that had to be manually moved unsearchable. Also, marking the item as `selected` does not work properly for these manually moved items.

Any ideas on why this might be happening?

Thanks!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Forums

Product Q&A

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

How to handle more options in aui-select

2 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events

Forums

Product Q&A

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

How to handle more options in aui-select

2 answers

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events

Welcome to the new Atlassian Community