Arrow keys and Enter Key don't work for selecting items in ion-list in browser

Ionic Framework ionic-v3
1

While in the Chrome browser I am not able to use the keyboard arrows keys to select an item from a list and make a selection with the Enter key.

Note: This functionality is also needed by an Android build running in an Amazon Fire TV Stick where its remote control is probably sending keyboard up and down keys for selection but are also ignored. I assume in this situation the remote control of this Android device is not able to simulated “touch”

In the browser, some of the keyboard is working, I am able to tab to a search bar and use the Windows hardware keyboard to type and filter down the list for example, however, tabbing never brings Focus to the list items in the save view (ion-list inside ion-content).

How can I setFocus to the whole ion-list, on display, so its list items are selectable with the up and down keys and a selection can be made with the Enter key?

My Lists layout looks like this and I am still hacking at it trying out “#ChsList autofocus…”

<ion-list #ChsList autofocus >
    <ion-item *ngFor="let Ch of ChannelsService.Data | ContentType : GlobalService.FilterContentType;" (click)="CatsShow(Ch)"
        [class.selected]="Ch.Id === GlobalService.Channel.Id" class="MediaTitle">

        <ion-thumbnail item-left>
            <img src={{ChannelsService.GetImage(Ch)}} />
        </ion-thumbnail>
        <p class="TitleArabic">{{Ch.TitleArabic}}</p>{{Ch.TitleAlt}}
    </ion-item>
</ion-list>

$ ionic info

cli packages: (C:\Users\AXM\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 6.5.0

local packages:

    @ionic/app-scripts : 3.1.5
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v7.2.0
    npm               : 4.0.5
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : C:/Users/AXM/AppData/Local/Android/android-sdk

Misc:

    backend : pro

I searched around quite a bit and the only thing closely related I found is

If you can help please share.

2

I have been suffering from similar issue,
trying to develop an app for iptv device.

However, I finally managed to solve this using the HostListener in the controller.
Here my solution:

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {

    if(event.key  ===  'ArrowDown'  ||  event.key  ===  'ArrowLeft'){
// Do action
    }
    else if(event.key  ===  'ArrowUp' ||  event.key  ===  'ArrowRight'){
// Another action
    }

    if(event.key  ===  'Enter'){
//Press action
    }
  }
3

Thanks for sharing this tip, it kind of worked…read more…

I have never used HostListener before so I googled and found the needed import.
import { HostListener } from ‘@angular/core’; // 20171219

I had forgotten how my pick lists are getting kept in sync with user touch, rediscovered :), in my case that they are bound to some data in a GlobalService.ts.

Here is my attempt to integrate your suggestion:

// 
export class ChannelsComponent {
    // 20171219
    // https://forum.ionicframework.com/t/arrow-keys-and-enter-key-dont-work-for-selecting-items-in-ion-list-in-browser/115564/2
    @HostListener('document:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {

        if (event.key === 'ArrowDown' || event.key === 'ArrowLeft') {
            // -) move to next Channel
            var Channel = this.ChannelsService.Next();
            // broadcast the new Channel
            this.GlobalService.Channel = Channel;
        }
        else if (event.key === 'ArrowUp' || event.key === 'ArrowRight') {
            // -) move to next Channel
            var Channel = this.ChannelsService.Previous();
            // broadcast the new Channel
            this.GlobalService.Channel = Channel;
        }

        if (event.key === 'Enter') {
            //Press action
        }
    }

This particular list html is setup like the following:

<ion-list>
    <ion-item *ngFor="let Ch of ChannelsService.Data | ContentType : GlobalService.FilterContentType;" (click)="CatsShow(Ch)"
        [class.selected]="Ch.Id === GlobalService.Channel.Id" class="MediaTitle">

        <ion-thumbnail item-left>
            <img src={{ChannelsService.GetImage(Ch)}} />
        </ion-thumbnail>
        <p class="Title">{{Ch.Title}}</p>{{Ch.TitleAlt}}
    </ion-item>
</ion-list>

I already notice some issues with the selection/scrolling behaviors. For example, while the “selected” item is taking place the list does NOT scroll up or down to reveal the newly selected item when I key down past the item at the bottom of the screen or when rolling of the bottom or top most item (my next/previous do wrapping).

I am sure there is more code out there to handle scrolling and keep the selected item always in view. However, I feel this whole thing belongs to Ionic and the expected behavior from such a list component, which needs to handle this kind of navigation in any environment.

It feels super out of place for me to implement this kind of “fixit” code for each an every pick list I have in my application.

I hope someone from Ionic steps in and provides a better path forward.

Thanks again for taking the time to reply and share.