Ionic Android TV

Question

I'm doing at APK on Ionic for Android TV and I have a problem with the controls of arrows.

The APK run of the device but his behavior not is correct. When use arrows for a shift of app, the focus not work that must be. It jumps some divs.

Here some of the code that this app uses:

TS:

matrixNodes: Array<any> = [];
matrixPosX: number = 0;
matrixPosY: number = 0;

. . .

keyboardAction(e) {
    let activeEle: any = this.matrixNodes[this.matrixPosY][this.matrixPosX];
    let parent: any = activeEle.parentNode;
    let moveRight = -224;
    let moveLeft = +224;

    if (this.matrixPosY != 0) {
        moveRight = -340;
        moveLeft = +340;
    }

    if (e.key == "ArrowRight") {
        if (this.matrixPosX < (this.matrixNodes[this.matrixPosY].length - 1)) {
            this.matrixPosX++;
            this.matrixNodes[this.matrixPosY][this.matrixPosX].focus();


            //SCROLL
            if (parent.style.left == 0 + 'px' || parent.style.left == 0) {
                if(this.matrixPosY != 0){
                    console.log(this.matrixPosY)
                    parent.style.left = '-350px';
                }else
                    parent.style.left = '-240px';

            } else {
                let old = parent.style.left;
                old = old.replace("px", "");

                parent.style.left = (moveRight + parseInt(old)) + "px";
            }
            ////////////////
        }
    } else if (e.key == "ArrowLeft") {
        if (this.matrixPosX > 0) {
            this.matrixPosX--;
            this.matrixNodes[this.matrixPosY][this.matrixPosX].focus();


            //SCROLL
            if (parent.style.left == 0 + 'px' || parent.style.left == 0) {
                if(this.matrixPosY != 0)
                    parent.style.left = '350px';
                else
                    parent.style.left = '238px';
            } else {
                let old = parent.style.left;
                old = old.replace("px", "");
                parent.style.left = (moveLeft + parseInt(old)) + "px";
            }
            /////////////////////////////
        } else {
            //Moverse al TAB
            let tab = document.getElementById("tab-button-home");
            tab.focus();
        }

This function(keyboardAction) its called with event keydown.

I want know why jumps some divs.. if is because there are use other event or other elements at HTML

Answer 1

When 1 line of code is the solution...

e.preventDefault()