Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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:

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

2 answers

0 votes
Daz Atlassian Team Mar 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

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!

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.

Suggest an answer

Log in or Sign up to answer
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you