Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

How to handle more options in aui-select

Adrian Kaczmarek
Adrian Kaczmarek March 7, 2018

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:

image.png

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

Answer
Watch
Like Be the first to like this
1308 views

2 answers

0 votes
Saravana Kumar
Saravana Kumar July 1, 2021

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.

Reply
0 votes
Daz
Daz
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 14, 2018

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

View More Comments
Colin Wong
Colin Wong July 22, 2020

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!

Like
Reply

Suggest an answer

Log in or Sign up to answer
Jira
Jira Software
TAGS
AUG Leaders

Atlassian Community Events

    See all events