Trying to get tabindex to work

I have a form that contains an ion-grid. There are several rows of two columns. Each column contains an ion-input.

I want the user to be able to navigate the form with the virtual keyboard Next button by moving down one column first and then down the second column.

I tried using tabindex but it is being ignored, instead the cursor is moving to the next ion-input in the dom.

Is it possible to achieve this with ionic? Should tabindex work?

My app is running on Android 10.

I have this same issue. Unwrapping inputs from their outer ion-item tags may work (unconfirmed) as explained in this thread: Ionic 4 - iOS accessory bar next/previous buttons disabled using ion-item · Issue #16498 · ionic-team/ionic-framework · GitHub

1 Like

Thanks for the response. I wasn’t using ion-item though. The problem was the keyboard was respecting the order of the inputs in the dom but ignoring tabindex, which was designed to overcome just this issue. In the end I simply opted to reorganise my page so I had enough room for one column so the input order in the dom now matches the expected user flow.

I did have an idea that I didn’t try which would be to have all my inputs in the correct order and then position them with css but this seemed very kludgy to me and gets rid of the benefits of the ion-grid such as it’s responsive nature. In the end just having one column seemed like less work :slightly_smiling_face:

I think ionic need to fix the problem by having tabindex work as expected.

1 Like