How to focus on the selected value in a long dropdown (mobile)

How to focus on the selected value in a long dropdown (mobile)

  

In my mobile application i have a dropdown with sometimes up to 100 values. Some users go through this list in a linear fashion, others more randomly. They select an item from the list and input some data, causing the dropdown to lose its focus. When they go to the next item, the dropdown opens at the top of the list and they have to scroll all the way down.

Is there a way to show the selected item when opening the combobox?

Best regards,

Leen Rietveld.

Hi Leen,

Maybe check whether the assigned variable is correct and is keeping the value.

I would take a look on these two documents for more information on how to use drop-down widgets in mobile:

  1. https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Inputs/Choose_One_Value_from_a_List
  2. https://success.outsystems.com/Documentation/10/Reference/Mobile_Interfaces/Designing_Screens/Dropdown

Regards,

Hello MeanLean,

A long list that must/can be opened many times is a bad UX option in my opinion.

Other than that, you have a problem, as the DropDown in mobile is not a normal SELECT HTML element, and it is created on the fly, so you need to attach an event to it to execute the scrollIntoView so that the selected element appears.

I did a small test. If you add a class to your dropdown (like 'x' in my example), and add this code to the OnReady of the screen, you will see the dropdown scroll to the selected element. So, it is just a matter of have the associated variable with the value you want to be visible.

Cheers.