Page MenuHomePhabricator

Issues selecting from the lookup component
Open, Needs TriagePublic

Description

As an ... I want to ... in order to ...

Problem:
during the usability test some participants did not select an option from the lookup menu when the option matched their search. This resulted in an invalid condition which leads to an error when running the query. Additionally, as a consequence the value field will not adapt to the property type and then later remove the input when a valid property was selected.

I'm assuming this is a more a component behavior that we need to tweak. for example immediately displaying an error state or selecting the top most match for the user.

Example:

elevation.gif (400×1 px, 110 KB)

Proceeding without selecting a valid property from the
lookup component menu means the input is not recognized and the value field doesn’t switch to the correct component.

Peek 2021-05-04 12-47.gif (400×1 px, 92 KB)

After running the query the field indicates an error. After selecting a valid property from the menu, the value field switches to the correct component, but loses the previous input from the user.

Screenshots/mockups:

BDD
GIVEN
AND
WHEN
AND
THEN
AND

Acceptance criteria:

Open questions:

Event Timeline

We could modify the component to match the suggestion made in the ticket's description:

selecting the top most match for the user.

This would then imply replacing the selection behavior of the Lookup to make it automatic instead of manual. Borrowing from the design patterns described by the W3C in the WAI-ARIA Authoring Practices for a similar component (combobox)...:

List autocomplete with automatic selection: When the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the textbox, and the first suggestion is automatically highlighted as selected. The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.

To complement this behavior, validation should be displayed when the entered text doesn't match any of the options (i.e. there's no matching suggestion, so the automatic selection cannot be made).

Hey Sarai, thank you for your suggestions. I think they're great and we should implement those changes to the components if that still makes sense in your opinion.