Combobox modifications to accomodate feature parity

[ankigupta92]

Background

Currently there is a dropdown type input where the user can type a static value or search for a column within the dropdown list items. Along with column, user can pick additional list types like functions or enrichments which are offered in dropdown tabs. They can even select multiple columns or do a combo of column and static value
One of the pain points is the usability of this dropdown, users accidentally type the column name in the input field without realizing that is actually a static value. So there is a need to automatically change the focus of the input field to a search. However users also prefer the ease of just typing in the static value offered by the current experience.

Feedback

I have re-designed the combobox using current design system and also accommodated search/static value pain point. However, to achieve the following feature parity of being able to have an input field that accepts static value along with categorized dropdown and a separate search, I had to modify the interaction a little bit.

• I am sharing a quick video I recorded of the interaction, that also includes current experience: https://github.com/user-attachments/assets/5c331503-be0f-4d4a-aaf2-8149f7775ae2

• clickable prototype linked here

Stage of design

High-fidelity

Research

No response

Relevant links

Clickable prototype of the combobox interaction

Are you looking for visual design support?

• Yes

Additional Information

I have signed up for OH for this Thursday March 13

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Combobox Improvements - Answer (updated: 08/10/2022, similarity score: 86%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 86%)
• Flex teams - Combobox functionality and Search - Answer (updated: 10/02/2024, similarity score: 86%)

[serifluous]

Hey @ankigupta92 ! Thanks for signing up.

This is more usability/design feedback: The interaction feels a little complex right now because you're having one form field responsible for multiple things: Adding a static value, selecting from lists of variables/functions, and editing existing values. There could be an opportunity to separate those responsibilities out a little more, so the type of source is a little clearer to the user (if that's important).

Have you tried separating out the components and interactions for adding a static value vs. selecting/adding something from a list? Something like this, but obviously the field you surface first depends a lot on what users are typically trying to do: https://www.figma.com/design/KlWRgdZx0mfbPEnOB7ZuYp/Paste-Feedback?node-id=842-1546&t=Nb4yr6oGk7SBfuYu-4

Looking forward to chatting more Thursday!

[nkrantz]

Here's a link to the office hours recording @ankigupta92 !