Dropdown with a long a large list of items

Feedback & Problem Solving
, ,
#1

Hi all,

we received some negative feedback for a specific use case.
The problem is about some dropdowns with a long list of values. The task becomes very tough when these values are bank codes (eg something very similar to the IBAN codes). Basically, within the fly-out, we don’t have enough room to show the entire value.

Here a quick wireframe to better explain the context:

Tablet
Tablet768×343 29.8 KB

Did u guys already face this issue?
Do u have another option to solve the issue?
Do u have some examples?

Thanks in advance for your help and have a blasting weekend!

2 Likes
#2

When faced with something similar in our environment, we use a piece of a PrimeFaces component called “Check Box Menu” that is essentially the same thing as your multi-select dropdown, but with search functionality.

36 AM

The component they demo isn’t capable of pulling back partial results in its search function, but ours is. For your purposes, this means you could enter the last 4 digits in the search field and pull back relevant results.

I would think that combined with the fix you’ve suggested would eliminate some issues.

4 Likes
#3

@dougcollins
thanks for your feedback!
As usual precise and precious.

It was my mistake in designing the component, in the current solution we do have the search field within the fly-out. We had a design review session this morning with the team and some POs and we decide to reject the issue.

Those are the points we collect against it:

  1. the fly out is designed to allow the user to select the visible options, if the desired value(s) is not there she/he can shrink the list by searching a precise value (or part of it)
  2. for other apps we tested similar components and we noticed that the users don’t scroll the list within the fly-out

We invited the customer to provide more data about the issue and to collect direct feedback from their users.
Let’s see what will happen :slight_smile:

2 Likes
#4

Wow. This is such as elegant solution.

I have faced a similar issue as @dopamino stated. In India, to add a bank account to transfer money we need to add the customer details and a code for the bank branch (usually 8-12 characters). The usual approach by all netbanking sites is to key it in manually via textbox or provide a search box (with bank name/branch).

2 Likes