Custom Focus Navigation & Scrolling

I’m designing some screens and want the user to be able to use the up and down arrow keys to scroll through a text area, and then when the scroll reaches the bottom, have the down arrow key change from scrolling to “focus next” widget in my group (same for up arrow and focus previous).

Also, ideally, instead of just next/prev focus, having arrow keys be able to move focus to the widget in the corresponding direction would be more user friendly than just up/down. For example if two buttons are beside each other, then left/right arrows could be used to focus back and forth, but if they were above/below each other, then the up/down arrows could be used instead.

I have attached a mockup movie of what I’m trying to achieve.

Based on my investigation so far it seems I may have to have my own keyboard handler that knows what widget is focused and convert up/down into different event_send() messages or calls to group.obj_focus(), but I want to see if there might be an easier way first or if something like this is planned/possible, perhaps implement it and submit a PR.

navigation-mockup

To guarantee the deterministic behavior I want, I’m thinking of creating a “focus graph” which indicates for each focusable component, which key event changes focus to which widget. That would be more work on each screen, but maybe worth it.

NOTE: The graphical keypad is just part of the Figma mockup, not on the device screen. The screen drawn by LVGL is just the black and white part.