What is 7.9.0 AUI Dropdown's equivalent to select option value

lbermejo · June 29, 2018, 12:13am

How do you differentiate each aui-item-* in an with async?
The current doc only shows attaching a listener to the menu’s items. However there’s no way to set the value? AJS.$ can’t seem to grab it via its checked property. While in the listener, it can only differnetiate each item by their textContent. In the case of items with HTML content (for example, statuses) this cannot be used in an if-else condition.

daz · July 5, 2018, 3:10pm

Hi @lbermejo,

I’m not sure I fully understand your question. I understand your question to be:

I have a series of elements like <aui-item-link>, <aui-item-checkbox>, etc., that are generated asynchronously through the <aui-dropdown-menu src=""> component variant.
I want to uniquely identify each item in the dropdown. How do I do that?

Please correct me if I’ve misunderstood you. Could you also clarify what your use-case is?

Cheers,
Daz

lbermejo · July 17, 2018, 12:27am

Hi Daz,

We are currently trying to use the AUI Dropdown as a filter similar to the filters in the Issue Search.

For example, the aui-dropdown we have for Status is loaded with Todo, In-progress, Done. These choices are loaded via the AJAX using src:

<aui-dropdown id="filter-status" src="/endpoint/statuses" />

The JSON returned looks somthing like, according to the doc example:

 { type: "section", label: "Checkboxes", items: [
        { type: "checkbox", interactive: true, content: "Todo" },
        { type: "checkbox", interactive: true, content: "In-Progress" }
    ]},

thus, we have no control how it creates the menu options (ie ) as the dropdown does that.

However, there seems to be no way to add something like a value="" for the dropdown choices, the way a normal does:

<select name="status">
  <option value="todo"> To Do</option>
  <option value="in-progress"> In -Progress </option>
</select>

We wanted to add value so that we can use the value of the checked item to generate a proper JQL query.

The only example in the docs is using a change listener for each item, but this does not help getting a value.

For now we worked around by using HTML in the content field of the JSON.

{ type: "checkbox", interactive: true, content: 'TODO <input type="hidden" value="to-do" name="to-do" />'}

And grabbing it by jquery, which by itself has difficulties selecting the checked items, ie, it does not select dropdown items that are checked:

AJS.$(‘aui-item-checkbox:checked’)
AJS.$(‘aui-item-checkbox[checked=checked]’)
AJS.$(‘aui-item-checkbox’).is(’:checked’)

as they are not true checkbox controls.

Perhaps there is a better way?

daz · July 20, 2018, 2:22pm

Ah, I understand you now. There’s a couple of things going on here that I should address.

First up, the <aui-dropdown-menu> component’s intended use-case is for constructing navigation menus. As such, the metadata you can provide for an item in a dropdown menu is limited.

You can give a dropdown item the following attributes: href, checked, interactive, disabled, hidden, and for
You can provide content for the item’s text.

There is definitely a gap in here: there’s no ability to provide an id for an item. In AUI 7.9.0, we made it possible to provide an item-id attribute on <aui-item-link>, <aui-item-checkbox> and <aui-item-radio>, but it looks like we didn’t extend that behaviour to async dropdowns. I’ve raised [AUI-4840] - Ecosystem Jira to track that oversight.

With all of that said, the use of <aui-dropdown-menu> to create your JQL constructor feels a little awkward, since it’s designed for navigation moreso than representing selected values. (It’s actually kind of awkward that we have checkbox and radio items in our dropdowns at all… the intended use-cases are hard to determine by reading our docs).

I think you have three options here:

Use the href attribute as your checkbox’s value – yes, it’s not strictly an href, but then again, you aren’t really building a menu, either – and listen to the change event on the <aui-dropdown-menu> element. You can inspect the value of href in there.
This requires the least amount of change to your code, but you’ll have to write your own logic for determining what combination of options the user has selected.
Switch to using AUI’s Select2 wrapper. This component is designed as a form field, so can represent a value and has accessors for retrieving the selected values. On the downside, it looks like a text field in the UI, which might not be what you want.
You can try out AUI’s undocumented “checkbox multiselect” component. In your p2 plugin, you can get it by depending on the aui-checkbox-multiselect web-resource key, or if you’re using the distribution of AUI, by loading aui-experimental.js and the associated CSS file.
You can create the element by adding HTML like this to your page:
```
var $el = AJS.$(`<aui-checkbox-multiselect>
   <option value="to-do">To Do</option>
   <option value="in-progress">In Progress</option>
 </aui-checkbox-multiselect>`);
 $el.appendTo(somewhere);
 $el.on('change', function(e) {
   console.log('values selected: ', e.target.getSelectedOptions())
 });
```
This element might be close to what you’re after, but it is a little rough around the edges. There are some fixes for that roughness in the pipeline for a future AUI version, but I can’t guarantee if or when they will land.

I hope between those options, you’ll be able to move forward. Thanks for sharing your use-case; I’ll take it on board and think about how we can make AUI better suited to this kind of thing.

Cheers,
Daz.

daz · July 20, 2018, 2:56pm

One quick follow-up re: this part of your question:

it does not select dropdown items that are checked:
AJS.$(‘aui-item-checkbox:checked’)
AJS.$(‘aui-item-checkbox[checked=checked]’)
AJS.$(‘aui-item-checkbox’).is(’:checked’)
as they are not true checkbox controls.

Perhaps there is a better way?

Since checked is a boolean attribute – its presence means its value is “true”, its absence means “false” – you can find all the “selected” elements by using AJS.$('aui-item-checkbox[checked]').

lbermejo · July 21, 2018, 11:53am

@daz

Wow, that was an awesomely detailed answer. Thanks for that and also for initiating the opening of the ticket.

For now, we have used AUI Select2 as an alternative (which has its own issues) and modified its look via css, but it’s nowhere near how AUI Dropdown resembles the JIRA issue filters. We’ve negotiated with our client that it’s a JIRA limitation for now.

We’ll also try the checkbox multiselect but may not use it yet due to its experimental nature.

Hopefully, your breakdown also makes it to the official docs as it is very informative. By the way, our use case is on Jira Cloud addon, not P2, though it’s great if it reflects there as well.

Thanks again!