Ion-slides erratic in ion-modal (5.6.4)

Hello! New to Ionic and don’t have a ton of React experience so it’s possible i’m doing something incorrectly. Been struggling with erratic behavior with ion-slides in a ion-modal for a couple days.

This is the second use of ion-slides in the application. The first seems to work well other than about 20% of the time calling slideNext() doesn’t advance the slides.

Created a stripped down component to rule out most of my application logic. If I route to the example component calling slidesRef.current?.slideNext(400) will advance the slides, animate and the onIonSlideDidChange event fires as expected.

However if I present the component in an ion-modal I see a variety of behavior that is inconsistent across refreshes:

  • Slides don’t advance at all using slidesRef.current?.slideNext(400)
  • Slides do advance, but don’t animat (just appear) and onIonSlideDidChange does not fire
  • In the case of the second screen recording - well nothing seemed to work

Initially, I disabled swiping, but later realized that if I swiped a slide, it would cause onIonSlideDidChange to start firing and I could advance using slideNext().

Often times, an un-related text change triggers a hot-reload and suddenly it works as expected.

Hopefully it’s something silly i’m doing but the randomness of the behavior has me perplexed.

const AppointmentWizardTest: React.FC = () => {
  const slidesRef = useRef<HTMLIonSlidesElement>(null);
  const dispatch = useDispatch();

  const slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  const nextSlide = () => {
    slidesRef.current?.slideNext(400).then(()=>slideChanged());
  };

  const prevSlide = () => {
    slidesRef.current?.slidePrev(400).then(()=>slideChanged());
  };

  const slideChanged = () => {
    slidesRef.current?.getActiveIndex().then(index => {
      console.log(index);
    });
  }

  return (
    <IonPage>
      <IonContent fullscreen class="ion-padding" scroll-y="false">
        <IonSlides
          ref={slidesRef}
          pager={false}
          options={slideOpts}
          onIonSlideDidChange={()=>slideChanged()}>
          <IonSlide>
            <h2>Slide 1</h2>
            <p>Lorem ipsum do lor sit amet, consectetur adipiscing elit. Vivamus eget dolor et mauris venenatis egestas et ac eros. Vivamus vel vehicula risus</p>
            <div><IonButton onClick={()=>nextSlide()}>Next slide</IonButton></div>
          </IonSlide>
          <IonSlide>
            <h2>Slide 2</h2>
            <p>Lorem ipsum do lor sit amet, consectetur adipiscing elit. Vivamus eget dolor et mauris venenatis egestas et ac eros. Vivamus vel vehicula risus</p>
            <IonButton expand="block" onClick={()=>nextSlide()}>Confirm</IonButton>
          </IonSlide>
          <IonSlide>
            <h2>Slide 3</h2>
            <p>Lorem ipsum do lor sit amet, consectetur adipiscing elit. Vivamus eget dolor et mauris venenatis egestas et ac eros. Vivamus vel vehicula risus</p>
            <IonButton expand="block">Close</IonButton>
          </IonSlide>
        </IonSlides>
      </IonContent>
    </IonPage>
  )
};

export default AppointmentWizardTest;

Router based presentation:

Modal presentation: