Vue-carousel: Bug: Missing cleanup of resize listener

[jsilasbailey]

Bug Report

Currently in the mounted() hook of Carousel.vue, an event listener is attached to window,

  window.addEventListener(
    "resize",
    debounce(this.onResize, this.refreshRate)
  );

But there is no equivalent removeEventListener call in the beforeDestroy() hook.

  beforeDestroy() {
    this.detachMutationObserver();
    window.removeEventListener("resize", this.getBrowserWidth);
    this.$refs["VueCarousel-inner"].removeEventListener(
      this.transitionstart,
      this.handleTransitionStart
    );
    this.$refs["VueCarousel-inner"].removeEventListener(
      this.transitionend,
      this.handleTransitionEnd
    );
    this.$refs["VueCarousel-wrapper"].removeEventListener(
      this.isTouch ? "touchstart" : "mousedown",
      this.onStart
    );
  }

This results in a buildup of listeners on the window object when a page is navigated to and away from multiple times via routing.

[quinnlangille]

Hey @jsilasbailey super good find! That's a quick fix on our end, I'll make a PR this week. :rocket:

[NicholasOttens]

Hey Im a first timer and I would like to handle this issue if I could.

[adrichey]

Taking this on now. I should have a PR in for this shortly! :)

[abhipanda]

Found the buildup showing up today in our app. Need this fix thanks