Ionic Framework Multi-Slide Forms

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 code. I was able to put together a codepen that simulates the issue I'm facing (and have embedded an excerpt below). 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!

<ion-slide-box>
  <ion-slide>
    <ion-content>
        <form name="newProblemForm1">
          <div ng-init="setForm(newProblemForm1)"></div>
          <div class="box">
            <div class="list">
              <h5 class="field-label assertive-field">Who is reporting the Problem? </h5>
              <div class="item item-input">
                <input type="text" placeholder="Name" ng-change="searchUsers()" ng-model="problem.FullReporterName" name="ReporterName" required reporter-name-validate/>
              </div>
            </div>
            <h5 class="field-label assertive-field">When did you see it? </h5>
            <div class="item item-input item-select">
              <input type="datetime-local" ng-model="problem.Timestamp" placeholder="" name="Timestamp" required max="{{maxDateTime}}">
            </div>
          </div>
      </form>
    </ion-content>
  </ion-slide>
  <ion-slide>
    <ion-content>
      <form name="newProblemForm2">
        <div ng-init="setForm(newProblemForm2)"></div>
        <div class="box">
          <div class="list">
            <h5 class="field-label assertive-field">Where is the Problem? </h5>
            <div class="item item-input item-select">
              <div class="input-label">
                Group
              </div>
              <select name="AssetArea" ng-model="problem.AssetArea">
                <option value=""></option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </ion-content>
  </ion-slide>
</ion-slide-box>