Ion-slides Tab issue

Ionic Framework ionic-v3
1

I have a slider with multiple slides in it, and forms in each slide.

<ion-slides #mySlider>
  <ion-slide>
    <form [formGroup]="fooForm">
    </form>
  </ion-slide>
  <ion-slide>
    <form [formGroup]="barForm">
    </form>
  </ion-slide>
</ion-slides>

When the page loads I lock the slider so the slides can’t be swiped between; I want the user to fill out the forms in order.

@ViewChild('mySlider') mySlider: any;

ionViewDidLoad() {
  this.mySlider.lockSwipes(true);
}

I then use “Next” and “Prev” buttons to control navigation between the slides.

<button ion-button (click)="nextSlide()">Next</button>
<button ion-button (click)="prevSlide()">Prev</button>

nextSlide() {
  // ( error checking )
  this.mySlider.lockSwipes(false);
  this.mySlider.slideNext();
  this.mySlider.lockSwipes(true);
}
prevSlide() {
  this.mySlider.lockSwipes(false);
  this.mySlider.slidePrev();
  this.mySlider.lockSwipes(true);
}

My problem is that I am able to use Tab while on the last input field of the current slide to jump to the first input of the next slide, even when the slider is locked.

I added (keydown.Tab)="$event.preventDefault()" to the last inputs in each form which prevents the user from tabbing forward into the next slide, but I’d prefer if it kept tabbing forward around the other slides. Plus the user can still use Shift+Tab to navigate backwards through the slides.

Is there a way to make Tab ignore the other slides so it doesn’t jump to them regardless of what way the user Tabs from?

2

I ended up just disabling/enabling the other forms as I navigate between slides like so:

fooForm: FormGroup;
barForm: FormGroup;
curForm: FormGroup;

constructor(public formBuilder: FormBuilder) {
  // (formBuilder setup)
  this.barForm.disable();
  this.curForm = this.fooForm;
}

nextSlide() {
  // (error checking)
  if (this.curForm === this.fooForm) {
    this.fooForm.disable();
    this.curForm = this.barForm;
    this.barForm.enable();
  }
}

prevSlide() {
  if (this.curForm === this.barForm) {
    this.barForm.disable();
    this.curForm = this.fooForm;
    this.fooForm.enable();
  }
}

Tabbing does what I want it to now.

3

Does anyone have a better solution for this problem using ion-slides in Ionic 4?