Question UI toolkit and new input system - programatically select visual element and improve navigation

Hey guys,
I've been struggling a little bit with UI toolkit + new input system.

I have a simple main menu and one of its items is Levels.


Play, levels, settings and quit are children of LeftSection. When you click Levels I want user to select a level - grid of icons inside scroll view in RightSection.

Basically playButton.clicked sets display to flex for the scroll:
levelsScroll.style.display = DisplayStyle.Flex

so the following right section is being shown:


Game controls are based on gamepad / keyboard and not the mouse. My problem is that I have no idea how to programatically navigate to the first level icon (button).

After levels are being shown keyboard only navigates through main buttons and I can only access levels via TAB button.

So I have two questions:
1. How to select first level so the user can only navigate through levels until back button is clicked (not added yet but you can imagine what I mean).
2. After levels are shown how to disable navigation for main menu buttons.

It works fine when I set display style for #Buttons to None
doc.rootVisualElement.Q<VisualElement>("Buttons").style.display = DisplayStyle.None;

but I just don't want to hide it.

Any help will be appreciated

 

I think I found a solution. It's clumsy but it works. Levels are now being shown in rows (three level / each row). After choosing Levels button I'm simply calling .Focus() on first level:

Then I had to override navigation for the button:


Overriding of the navigation buttons was necessary because it wasn't logical at all. For example Right wasn't going from first to second level and so on.