Update event options to match new version of Swiper #14865
Conversation
| @@ -379,7 +403,7 @@ export class Slides { | |||
| <slot></slot> | |||
| </div> | |||
| { this.pager ? <div class="swiper-pagination"></div> : null } | |||
| { this.scrollbar ? <div class="swiper-scrollbar"></div> : null } | |||
| <div class="swiper-scrollbar" hidden={!this.scrollbar}/> | |||
There was a problem hiding this comment.
Why is this changed? If the scrollbars are not needed, we should not render them
There was a problem hiding this comment.
It looks like Swiper expects the scrollbar div to exist in the dom even if it isn't being displayed. When navigating away from a page that has the scrollbar prop set to false you'll receive this error:
Uncaught TypeError: Cannot read property 'removeEventListener' of undefined
at Swiper.disableDraggable (ion-anchor.md.js:8691)
at Swiper.destroy (ion-anchor.md.js:8770)
at Swiper.destroy (ion-anchor.md.js:8837)
at ion-anchor.md.js:3370
at Array.forEach ()
at ion-anchor.md.js:3369
at Array.forEach ()
at Swiper.emit (ion-anchor.md.js:3363)
at Swiper.destroy (ion-anchor.md.js:6827)
at Slides.componentDidUnload (ion-anchor.md.js:11703)
I didn't dig too far into it, there could be a better solution.
Keeping the scrollbar in the dom does seem to silent the Cannot read property 'removeEventListener' of undefined errors though.
There was a problem hiding this comment.
Looks like you need to modify the scrollbar options in the default settings
scrollbar: {
el: this.scrollbar ? '.swiper-scrollbar' : null,
hide: true,
},
Then you could go back to conditionally rendering the scrollbar.
Short description of what this resolves:
Some of the Swiper options have been re-named/re-structured: http://idangero.us/swiper/api/#events
When navigating away from a page that contained
<ion-slides scrollbar={false}>you'd receive an error:It looks like Swiper expects the scrollbar div to be in the dom.
Changes proposed in this pull request:
Add events:
Fix:
eventOptions.Ionic Version: 4.0.0-beta.0
Fixes: #14859, #14822