Common UI – Focus always goes to the wrong button in custom Option Button widget

Hi there,
I’m currently working on a menu using Common UI, and I’m stuck on a focus issue with my custom option button setup.

I have a widget called WB_OptionButton, which contains two CommonButtonBase buttons:

  • WB_BackgroundButton (the one I want to receive focus)
  • WB_ActionButton (secondary button)

The problem is that the focus always goes to the wrong button – it defaults to WB_ActionButton instead of WB_BackgroundButton.

Even when I use SetFocus() or set DesiredFocusWidget to WB_BackgroundButton, it doesn’t seem to work. The only time the focus is correctly applied is when I move WB_BackgroundButton below WB_ActionButton in the hierarchy – which I unfortunately can’t do in this case due to layout requirements.

Has anyone run into this before or knows how to force the correct button to receive focus?

I’d really appreciate any advice or solutions – thanks in advance!

Here are a few things to check!

Make sure your “Setting Name” or any of the other items isn’t blocking the focus visibility by having its bounding overlapping your first button.

I believe you can mark objects as “Non-Hit Testable” (the option is called something along those lines opposed to visible)

Additionally, make sure your second button isn’t covering the first one. I generally simplify my hierearchy in these situations to ensure I can even get focus on both items.

If it’s ABSOLUTELY not working, you can try this: (Disclaimer, it’s really ugly, but very reliable). Make a third invisible button size of your canvas that can forward its inputs. I only resort to this when I have really complicated layouts.

In general, I’ve found the focus settings to be really sensitive and unreliable. Hopefully this gives you a direction to explore!