Converting "touch" items to android TV direction pad controllable

WI have a standard ionic app with a side menu. I’m looking to add some basic support for direction pad.

I can easily trap the key codes like so:

window.addEventListener('keydown', keyDownHandler, true);
      function keyDownHandler(evt){
        var keyCode=evt.keyCode;
        doSomethingWith(keyCode);
     }

This works well, but my key interest is to use a generic approach where moving direction keys results in the UI focusing on the “next” focusable item on the screen. For example:

There are “tappable” items everywhere - is there a generic directive that works with ionic that can move focus with some visual indication (note that these are not inputs - just buttons and ng-click items) and tapping d-pad’s “select” results in execution of the ng-click action associated with it?

I’ve seen past discussions on input elements, but this is more of a generic approach that I’m looking for.

At this stage I am NOT looking for an optimized navigation experience. Just an ability to access all clickable elements via the direction pad.

I have a generic solution somewhat working. It basically comprises of:

a) Marking elements of templates that I want to enable for dpad with a monotonically increasing id (viewname-move-1, viewname-move-2 and so on) (example here) . This is to avoid caching issues etc - trying to detect the current view predictably seemed very hard.

b) Writing a keyboard handler that highlights items based on view being rendered and sequence id of the element (code here)

c) I have special handling for the side menu as its an overlay for any view

d) I could not rely on just focus() because many of the control items (like the grey buttons you see in the video) are not focusable - they are a hrefs. Keeping a monotonic id and doing a querySelector solves this issue.

Overall this solution works ok-ish as you can see in this video https://youtu.be/Q1IKWDwNGd8

My challenges now:

a) If I go to a view that has input elements, android TV seems to have its own detection mechanism and moves input there which confuses my handling logic. Not quite sure how to solve that

b) I need to figure out how to “activate” <ion-toggle> - clickHandler doesn’t work

c) I don’t yet have a strategy for popups - how do you handle them to that you can discard them by clicking ok?

d) I have since discovered https://github.com/luke-chang/js-spatial-navigation - wondering if anyone used it

thx

I struggled with the same problems, here are the things I discovered:

a) You mean when an Input is focused the Android virtual keyboard pops up and the arrow keys navigate the keyboard instead of your items? In this case the color buttons (red, green, yellow, blue) can still be used, because they are not captured by the keyboard.

b) I solved this by changing the connected data directly instead of the <ion-toggle> state. <ion-toggle> then automatically mirrors the change.

c) I retrieved the popup buttons with let alertButtons:HTMLCollectionOf<Element> = document.getElementsByClassName('alert-button'); and then manually handled the focus again. Don’t forget to set a focus color in css (.alert-button:focus) or else you won’t be able to see if it’s focused.