Ion-slide-box and input autofocus

ionic-v1
1

I have been trying to use ion-slide-box to create a multi-staged form. I also wanted the input/select boxes to go automatically in focus when the user moves to a new slides. For that purpose, I used a custom autofocus directive.

The problem is that the autofocus directive messes up with the slide if it is triggered while the slide is still being animated.

I’ve created a CodePen to illustrate the problem here:

I’ve tried adding a timeout so that the autofocus directive waits for the animation to finish before being triggered. That worked, but only to an extent. The problem is that the bug still appears if the user decides to swipe back and forth quickly.

Does anyone have any idea on how to fix this?

Thank you.

2

In case anyone has the same problem, I found a quick and dirty fix by listening for transitions on ‘slider-slide’ before focusing on the input element:

var target = document.getElementsByClassName(‘slider-slide’)[mySlide];
target.addEventListener(‘transitionend’, focus);

This is far from perfect, but it works for now.

Here’s the CodePen if you want to have a look:

1 Like