New component: Dropdown with autocomplete

[robertgebhard]

Hello there,

I'd like to ask for new UI component dropdown with autocomplete. Something similar to this example:

At the moment we use Dropdown Standard with a lot of entries. It would be nice for the user not to have to scroll so much.

Thanks

[timheiler-ico]

Hi Robert! We like the idea and we do see the need. We take it as an opportunity to see what autocomplete means in terms of time and effort. we'll give it some thought and let you know how much priority we can give this topic.

[robertgebhard]

Hello there, do you already have some good news for us. Will there be such a component in the near future? Thanks!

[robertgebhard]

Hello, I do not want to be annoying but I would be very happy about an answer. Thanks!

[acstll]

Hey @robertgebhard, you're not annoying, quite the opposite, thanks for the reminder! I'm sorry we missed this message.

To answer to your question: yes, there will be such component. I expect we will be working on design/development during Q2. I guess that can count as near future.

Are you currently using any non-Scale component for this, from other library or even custom-built?

Sorry once more for the delay in the reply 🙏

[robertgebhard]

Hey @acstll, that sounds great. Thanks for your info. Currently we are not using a non-scale component. Users still have to scroll through a long list.

[UBOrange]

Hey @acstll, do you plan to also solve the issues #867 and #868 as part of the new feature? As you might remember we're still using a "private" version of the Scale dropdown component due to a problem with stencil.

[acstll]

@UBOrange we will definitely fix those, but not necessarily directly related to this one here.

An autocomplete component needs a dropdown (or menu list) but that's technically different from a dropdown component if you look at it as an equivalent of the native select. The suggested component here is a combination of the two. We want to first develop a plain input with autocomplete, and then see how to integrate that into a dropdown-select. Does that make sense? 🙂

[UBOrange]

Hey @acstll, I'd assume that the plain input would require some kind of dropdown as well. But yes, it makes sense to start with the more simple solution and then to advance it. I'm looking forward to see it working 👍

[robertgebhard]

Hallo @acstll is there already something new regarding the new component? Maybe a beta variant or a schedule when the dropdown will be available? 🤗 Best regards Robert

[acstll]

Hey @robertgebhard 🙂

we have nothing to share on this particular component, BUT we have a new custom "dropdown select" in the works (PR, and preview here) that we will use as foundation for the autocomplete one. So no big good news but there's some progress!

Thanks for asking!

[robertgebhard]

Hey @acstll,

some progress sounds very good and the new custom dropdown fits perfectly with the rest of the design. If the user could now use the field like a search, we have what we need :D

When do you think the next step can be released as a beta?

Best regards Robert

[acstll]

Hey @robertgebhard — we have no "when" yet for this next step, but I'm trying hard to prioritise it amongst all the other stuff.

I wanted to ask you a couple of things regarding requirements:

• I think this is more a "filter" than autocomplete; there's a static long list, and you narrow it down by typing… contrarily, with an autocomplete feature there's no previous list, you type, and then you get some suggestions, so there's might be even a server request — do you agree that we want a filter here? this "filter" feature could be activated via a prop
• in your video/gif example, when you open the dropdown, it immediately focus the extra text input so you can type; if you press the down/up arrow keys, it focus the first/last item on the list so you can move thru the options, correct?

(is the example from Stripe? it'd be cool if I could try it myself)

Thanks in advance 🙏

[robertgebhard]

Hey,

thank you very much for your efforts! Yes, of course you are right. It is indeed a filter. The behaviour should be as you have described it. However, I do not have an exact description. When I posted the issue, I was only looking for a suitable example on Google Image Search.

Shall I think about how exactly it could behave and send it to you?

Best regards Robert

[acstll]

My pleasure.

Shall I think about how exactly it could behave and send it to you?

if this is a quick thing and doesn't take that much of your time, we would appreciate it. (We will still do some research to try and get accessibility right from the start.)

Thank you!

[robertgebhard]

Hey,

of course I'm happy to support you. I've sketched out roughly how the behaviour should be. It is probably not complete but hopefully it will help you.

Best regards Robert

[acstll]

Thank you @robertgebhard, definitely helps!

[tshimber]

Hello, Scale team! Could you please tell raw estimation, when the component will be available? My team asks to plan for next PI)

[acstll]

Hey @tshimber — I would say end of year. We're currently in the middle of getting the component checked/AA-certified for accessibility.

This is not going to be a new component, but rather a new "filter" feature for the new but already existing Dropdown Select (https://telekom.github.io/scale/?path=/docs/beta-components-dropdown-select--standard), currently in beta.

I will try and come back in the upcoming days with a "less raw" estimation.

[tshimber]

Thanks a lot for the info! As for me, I don't need less raw estimation for our team)

[Tiejo]

Hi. Im searching for this exact component. Is it availible now? Cant seem to find it :(