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
onIonSlideDidChangedoes 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:
