Customize a Select´s dropdown

Hi, I want to customize the dropdown from the Select UI component.

I wish to limit the number of rows showing in the dropdown. Because I have 100 machines that I want to be searchable in the select. But, I only want to show max 5-7 machines at the time for the user. As well as the color of the dropdown to white.

Is this possible? I am struggling to find any simple features to solve this.

@kristian @Shahitha @rhys

Thanks.
Sinan

Hi Sinan,

It is not possible to configure the built-in UI component to limit the number of results or edit the color, at the current moment.

The color part is already registered as a feature request. Currently, the background color will match the color that you have selected as “Paper” in Themes, so you can consider changing this to white (which is the default).


Skjermbilde 2024-01-23 kl. 13.17.30

The “limit result” setting should be an option, and I will register this as a feature request. However, the workaround is to use a text edit and a container/popover for the droplist instead, and display a repeating list of machines filtered on the text in the text input.

Hope this helps!

Thank you @isabelslorer. I have another question regarding the Select. I want to a filter to be enabled when the Select is pressed, but does not contain text yet (autocomplete activated; so it has a search bar in it).

The use case is that when the user press the select, I want the select to only show suggested machines. I know how the filter should work, but I am struggling to enable it. With text edits it is easier, because we can check if the user has pressed the text edit and if it is empty. But I am struggling to check this for select.

We are trying to use the Select as much as possible because we must iterate through a lot of machines, making the search very slow. Select solves this.

Thanks

Hi,

“On focus” is not a built-in feature in the Select component, but you can for instance place a container around the Select UI component and set a boolean variable to true when you click it.

Hope this solves your problem!

1 Like