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!