Input tabbing problem in Multi-Slide Forms


#1

Hi!

I’m currently in the process of creating a multi-slide form based in Ionic for a mobile app (iOS and Android). The form currently successfully supports swiping as well as a next button in the footer. However, I would also like to implement the KeyboardAccessoryBar to allow an iOS user to utilize the forward and back arrows (">" and “<”), as well as the done button.

When I set cordova.plugins.Keyboard.hideKeyboardAccessoryBar to false, I was successfully able to see the Accessory Bar, but noticed that I hit a strange UI issue when I tried to go forward on the last field of the first ion-slide content section. It seems like when this occurs, all subsequent pages are shown at the same time, overlapping each other, and the app needs to be restarted in order to reset it.

After playing around with the code, I noticed that the problem could be replicated by utilizing the tab key in a browser based version of the app. Based on the codepen I found in Issue 16315, I was able to put together a quick and similar codepen that simulates the issue I’m facing.

You’ll notice in my codepen that if you swipe between screens, there’s no issue - however, if you use tab to try and get from the first page to the second page, all of the subsequent pages overlap in the view.

Would sincerely appreciate any help, feedback, or insight that anyone might be able to provide on this!! Thanks!


#2

I have the same problem! Any help?


#3

Facing a similar issue. Did you find any workaround for this?


#4

This is a long shot since it’s been nearly a year, but have you found a solution to this? I have come across this myself and it’s the only major bug in my app that I can’t figure out. Your question is a word by word recounting of my experience, so hopefully someone can help!