Trying to recreate certain UI feature from HollowKnight

Hello,

First of all I 'd like to apologize in adavance, should a similar question have already been asked a thousand times. The feature I’m looking for is so specific, that I wasn’t even sure what to search the forum for.

Im trying to recreate this feature from Hollow Knights menus, where, if you select an option, either by hovering over it or select it via your navigational inputs from your keyboard/controller an additional UI element gets drawn. This UI element does not only serve as a visual indicator as to which option is currently selected, but is also acting as one or multiple buttons that can be clicked. This way the player can navigate the menu and change options by using only mouse, only keyboard/controller, or, combine the two methods.

The way I have been trying to solve this, is by creating an empty with a canvasGroup component and bind the button(s) I want to be shown to it. Then I set up a different selectable UI element to act as a trigger and call methods that sets the alpha and interactable value of the canvasGroup, when the trigger is selected/deselected. The respective methods for showing and hiding the canvasGroup are called in the OnSelect() and OnDeselect() methods from the ISelectHandler interface.

And this is where my problem lies: When I try to click my newly drawn button, OnDeselect() gets called and the button gets deactivated and hidden. I tried setting the new buttons navigation type to none, so it cant get selected, but that didnt help. Apparently, Unity calls the OnDeselect method not only if another element gets selected, but also if it is pressed and I couldnt find a way to circumvent this.

I would be very thankful if anyone could offer advice on how to prevent the OnDeselect method from firing or, if thats not possible, suggest a different way of creating this feature. I have been fiddling about for a few days now and Im honestly at my wits’ end.

Few potential approaches
a) use two factors for keeping the canvasGroup visible - the selectable UI element is selected, when mouse is over you canvasGroup. If either of these is true don’t hide.

One trick that is occasionally used in some (not necessarily unity) UI systems is parenting the popup to the show button. In combination with fact that hovering a child element is considered hovering parent (in some UI systems), it allows simply reacting to the show button mouse enter/leave events. I think it used to work that way in UGUI as well, but at one point Unity changed how mouse events interact with object hierarchy making this approach more complicated.

b) delay the hiding on deselection by one frame (since usually old object will be deselected before selecting new one), check if currently selected object is indirect child of canvasGroup