Keyboard Navigation in Ionic 5 Web Application

Hi,

I’ve got an angular app using Ionic 5 that is designed for use on the web.

I’m trying to work out how to do simple keyboard navigation from a text input, to an ion-select, to another ion-select.

There doesn’t seem to be any way to open this standard controls selection without writing code. But if I write code it pops open the selection popover but I can’t navigate the selection of items up and down. If I use the arrow keys it scrolls without moving the selected/highlighted item. If I use tab it alternates between the first element and the late element.

Also, using code like (ionBlur)=“mySelect.open($event)” on the previous item opens the control, but it’s really buggy, sometimes opening the selection popover multiple times or randomly scrolling to the bottom of the selection leaving the everything else off screen.

I feel like simple keyboard navigation shouldn’t be this hard, but I’m clearly missing something.

What am I missing?

3 Likes