Arvados

Users want to be able to efficiently set multiple values on a property. Currently this is annoying because after adding the key-value property, they have to re-select the key.

Proposed solution:

• After entering a value and hitting enter or clicking "Add", the "key" field is not cleared
• Focus remains on the "value" field, so that the user can immediately start typing the next value
• If focus enters the "key" field (by clicking) the value of the "key" field is cleared, but clicks on the "key" field while it has focus just does the normal thing of moving the cursor

Using a multi-select control (with check boxes) was rejected for the initial implementation as being (a) more complex to implement and (b) conflicting with free text entry and autocomplete behavior and (c) not necessarily easier to use, if the list of options is very long, the user would need to scroll (and/or autocomplete would need to be redesigned).

We will implement the proposed solution first and seek feedback.

Original description:

Properties in Arvados allow multiple values for a key. Setting these could be streamlined by allowing multiple selections at once. This could be done using such a component.
https://stackblitz.com/edit/react-mui-multiselect-dropdown?file=src/DemoDropdown.jsx