Common UI Keyboard Focus

Hi! That issue is not streamlined in Unreal however it is perfectly maintainable. If you are using common ui states and built in logic it wouldn’t work out of the box however with minimal effort input handling can be done for umg’s even just with blueprints, better with mixed C++ and BP.

The trick is to handle inputs properly from the outer most parent and building logic on top of that. Sometimes in input handling we have to detect which input is the main source of truth but think thats another issue. To just to briefly demonstrate an approach (atleast my mindset around it)

I have a button and this has built in atomic logic as its states, styles etc. It has an enum as ist states events.


I have a common molecule called WGT_Horizontal menu. This simply inserted in many places and depending on what designer defines it generates. It sets default selected ids etc. After all its just a menu.

When something is interacted no matter what input event is called and it does something.

for example OnSelectNext unselects alll items and calls menu item to set it as selected

and the important part. When we add a panel with created elements, as example like options menu. I switch inputs to UI or UI Game and assign scheme, and handle all interaction at panel level.

Here is common input actions, like ui nav left right up down etc. and does its specific command granting me strict controlls. Sometimes using unreals navigation system OnSelectFocus widgets interactions are filtered. Like if widget focus is menu bar, Q E makes only step action there.

There is couple of reasons I do like this, since Unreal Focus state is not very relliabllle between hardwares I don’t want to rely on that. Instead I rely on panel and Selected States since UE Focus system isn’t designed for complex nested menu systems. Also I would like to build my ui platform agnostic, I wanted to focus on what user wants to do rather than what button they press. I controll which panell is added to screen and focus, should it be displaying a cursor or not at a lower level UI Manager that controlls everything such as main input detection, hardware changes, focusing on widgets, setting the game state etc.

To Recap

  1. Don’t relly on focus entirely, Mouse can break focus, its not designed for that.
  2. Handle inputs at parent level or centeralize, make them agnostic. NavLeft NavRight etc. can be even in manager panels just listen events.
  3. Have mouse states as hover, pressed however treat them as cosmetic have your selected state. Thats a very common proven interface development method commonly used in web.

What you need to do :
1.Create a custom button widget. Make it generic add its states as enum.
2. Create a container Widget (Panel of yours with 3 buttons). On contruct set one of their state selected and hold the value.
3. OnNext or whatever action input, select next (set all buttons unselected, select currentid+1)
4. You can hide engine blue focus thing cause you don’t need it anymore.

This pattern is common practice and woulld work every development environment.

On below video simply, hovers etc states cosmetic, OnClick, is just a special navigate function to desired id.

PS: MVVM is not a real modelview/viewmodel in unreal, however its a good built in system that you can use to handle things. On the other hand as you said can be overkill for you and everything can be done manually too.