Mouse-enabled, multi-select, dropdown

[dblevins]

Using only the mouse, our REQUEST FORMATS and RESPONSE FORMATS control is not a dropdown. It is only a free-type field that provides no help to the user.

The control does not enter "dropdown" mode until you begin typing.

Using JIRA as an example the behavior should be as follows:

Start

The component starts looking like plain text:

(we're good here)

Hover

On hover we see the pencil icon:

Click

On click the an input field appears with:

• checkmark accept button
• x cancel button
• dropdown arrow (missing)

Clicking Dropdown arrow

When you click the dropdown arrow, you see a list of choices:

The first selectable choice is highlighted

Moving with the mouse

As you move down the list with your mouse, the highlight follows the mouse giving the user visual feedback

Mouse Click

Clicking with the mouse exits the dropdown and adds the item to the text field. Note, the text field does not turn back into a label, we must still click the OK or Cancel buttons.

Multi-select

This version of the control allows selecting multiple values this way.

Multi-select getting too big

If the values start to stretch the multi-select text field, it grows larger and the dropdown button grows with it.

keyboard

Note the keyboard and up/down arrows, enter-to-select functionality should still work.

[tbookless]

@dblevins do we want a fixed list of options in the drop down fields, or do we want to offer several options, and then still allow the user to enter their own? In either case, where can we located the specific list of options that should be offered?

[dblevins]

several options, and then still allow the user to enter their own

The list of options that were there appeared good -- note I couldn't see them all as the control doesn't allow it. If we keep the list of options we have now, we should be good.

[dblevins]

In future versions, that list will be persistent and we'll store things in the backend and hint users based on what other users have entered. Someday.