Control custom dropdown text and selection highlighting independently

Feature request
1

Currently lv_dropdown_set_show_selected controls the text that is displayed (custom or selection) and the highlighting of the selection.
I would suggest to create a second method “lv_dropdown_set_highlight_selected” which sets a new highlight_selected field in lv_dropdown_ext_t

Use case example:
I have a dialog where the user is able to choose the keyboard layout that should be used via a dropdown.
The options in the dropdowns are the names of the keyboard layouts (ex. German), but only the short layout code is used as text when the dropdown is closed (ex. DE). To achieve this i have to call lv_dropdown_set_show_selected(false), but without the selection being highlighted, selecting an entry with the arrow keys is very difficult.

2

If you are using keyboard you can use the keypad input device type of LVGL and groups. With this, it works out of the box.

With the lv_demo_keypad_encoder() demo it works liek this:
dd

3

My problem is that the selected item is note highlighted in the page if show_selected is false, you are not able to see which option is currently selected when using the keyboard.
From left to right the dropdown setup is:

  • lv_dropdown_set_show_selected(dd_true, 1);
  • lv_dropdown_set_show_selected(dd_false, 0);

lv_dd_before

I would like to get a behaviour like that:

  • lv_dropdown_set_show_selected(dd_true_true, 1); lv_dropdown_set_highlight_selected(dd_true_true, 1);
  • lv_dropdown_set_show_selected(dd_true_false, 1); lv_dropdown_set_highlight_selected(dd_true_false, 0);
  • lv_dropdown_set_show_selected(dd_false_true, 0); lv_dropdown_set_highlight_selected(dd_false_true, 1);
  • lv_dropdown_set_show_selected(dd_false_false, 0); lv_dropdown_set_highlight_selected(dd_false_false, 0);

lv_dd_after

Here is the code for the first screenshot:

lv_group_t	*g_in;
lv_obj_t	*cnt;
lv_obj_t	*dd_true;
lv_obj_t	*dd_false;

g_in = lv_group_create();
lv_indev_set_group(kb_indev, g_in);

cnt = lv_cont_create(scr, NULL);
lv_cont_set_fit(cnt, LV_FIT_PARENT);
lv_cont_set_layout(cnt, LV_LAYOUT_ROW_MID);
lv_obj_align(cnt, NULL, LV_ALIGN_CENTER, 0, 0);

dd_true = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_true, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_true, 1);
lv_dropdown_set_text(dd_true, "Device");

dd_false = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_false, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_false, 0);
lv_dropdown_set_text(dd_false, "Device");

lv_dropdown_open(dd_true);
lv_dropdown_open(dd_false);

lv_group_add_obj(g_in, dd_true);
lv_group_add_obj(g_in, dd_false);

And here for the second screenshot:

lv_group_t	*g_in;
lv_obj_t	*cnt;
lv_obj_t	*dd_true_true;
lv_obj_t	*dd_true_false;
lv_obj_t	*dd_false_true;
lv_obj_t	*dd_false_false;

g_in = lv_group_create();
lv_indev_set_group(kb_indev, g_in);

cnt = lv_cont_create(scr, NULL);
lv_cont_set_fit(cnt, LV_FIT_PARENT);
lv_cont_set_layout(cnt, LV_LAYOUT_ROW_MID);
lv_obj_align(cnt, NULL, LV_ALIGN_CENTER, 0, 0);

dd_true_true = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_true_true, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_true_true, 1);
lv_dropdown_set_highlight_selected(dd_true_true, 1);
lv_dropdown_set_text(dd_true_true, "Device");

dd_true_false = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_true_false, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_true_false, 1);
lv_dropdown_set_highlight_selected(dd_true_false, 0);
lv_dropdown_set_text(dd_true_false, "Device");

dd_false_true = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_false_true, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_false_true, 0);
lv_dropdown_set_highlight_selected(dd_false_true, 1);
lv_dropdown_set_text(dd_false_true, "Device");

dd_false_false = lv_dropdown_create(cnt, NULL);
lv_dropdown_set_options(dd_false_false, "Phone\nTablet\nDesktop\nNotebook");
lv_dropdown_set_show_selected(dd_false_false, 0);
lv_dropdown_set_highlight_selected(dd_false_false, 0);
lv_dropdown_set_text(dd_false_false, "Device");

lv_dropdown_open(dd_true_true);
lv_dropdown_open(dd_true_false);
lv_dropdown_open(dd_false_true);
lv_dropdown_open(dd_false_false);

lv_group_add_obj(g_in, dd_true_true);
lv_group_add_obj(g_in, dd_true_false);
lv_group_add_obj(g_in, dd_false_true);
lv_group_add_obj(g_in, dd_false_false);
4

Ah I see, thanks for the examples.

What if we simply always show the selected option in the list and show_selected controls only to whether it should overwrite the text in the “button” or not.

5

I thought about that, but i found one scenario where you would want to replace the text and dont highlight the selected item:
You could use the dropdown as a hamburger menu, in this case the text is replaced by the symbol and all options are used as buttons.

6

I think in this specific case you can simply use a transparent style for LV_DROPDOWN_PART_SELECTED.

7

You are right. I can send a pr for the library and the docs, if this change is wanted.

8

That would be great, thank you in advance!