fix: Remove event listeners on component destroy

stasson · Apr 2, 2018 · 34a31d4 · 34a31d4
1 parent 5adfe34
commit 34a31d4
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 49 deletions.
diff --git a/components/drawer/mdc-drawer.vue b/components/drawer/mdc-drawer.vue
@@ -141,16 +141,16 @@ export default {
   },
   mounted() {
     if (this.toggleOn) {
-      let source = this.toggleOnSource || eventBus;
-      source.$on(this.toggleOn, () => this.toggle());
+      this.toggleOnEventSource = this.toggleOnSource || eventBus;
+      this.toggleOnEventSource.$on(this.toggleOn, this.toggle);
     }
     if (this.openOn) {
-      let source = this.openOnSource || eventBus;
-      source.$on(this.openOn, () => this.open());
+      this.openOnEventSource = this.openOnSource || eventBus;
+      this.openOnEventSource.$on(this.openOn, this.open);
     }
     if (this.closeOn) {
-      let source = this.closeOnSource || eventBus;
-      source.$on(this.closeOn, () => this.close());
+      this.closeOnEventSource = this.closeOnSource || eventBus;
+      this.closeOnEventSource.$on(this.closeOn, this.close);
     }
     media.small.addListener(this.refreshMedia);
     media.large.addListener(this.refreshMedia);
@@ -159,6 +159,16 @@ export default {
   beforeDestroy() {
     media.small.removeListener(this.refreshMedia);
     media.large.removeListener(this.refreshMedia);
+
+    if (this.toggleOnEventSource) {
+      this.toggleOnEventSource.$off(this.toggleOn, this.toggle);
+    }
+    if (this.openOnEventSource) {
+      this.openOnEventSource.$off(this.openOn, this.open);
+    }
+    if (this.closeOnEventSource) {
+      this.closeOnEventSource.$off(this.closeOn, this.close);
+    }
   },
 };
 </script>
diff --git a/components/slider/mdc-slider.vue b/components/slider/mdc-slider.vue
@@ -174,11 +174,15 @@ export default {
     eventBus.$on('mdc:layout', this.layout);
 
     if (this.layoutOn) {
-      let source = this.layoutOnSource || this.$root;
-      source.$on(this.layoutOn, this.layout);
+      this.layoutOnEventSource = this.layoutOnSource || this.$root;
+      this.layoutOnEventSource.$on(this.layoutOn, this.layout);
     }
   },
   beforeDestroy() {
+    eventBus.$off('mdc:layout', this.layout);
+    if (this.layoutOnEventSource) {
+      this.layoutOnEventSource.$off(this.layoutOn, this.layout);
+    }
     this.foundation.destroy();
   },
 };

diff --git a/components/snackbar/mdc-snackbar.vue b/components/snackbar/mdc-snackbar.vue
@@ -11,82 +11,103 @@
 </template>
 
 <script>
-import MDCSnackbarFoundation from '@material/snackbar/foundation'
-import { getCorrectEventName } from '@material/animation'
+import MDCSnackbarFoundation from '@material/snackbar/foundation';
+import { getCorrectEventName } from '@material/animation';
 
 export default {
   name: 'mdc-snackbar',
   props: {
     'align-start': Boolean,
-    'event': {
+    event: {
       type: String,
       required: false,
-      default () { return 'show-snackbar' }
+      default() {
+        return 'show-snackbar';
+      },
     },
     'event-source': {
       type: Object,
       required: false,
-      default () { return this.$root }
+      default() {
+        return this.$root;
+      },
     },
-    'dismisses-on-action': {type: Boolean, default: true}
+    'dismisses-on-action': { type: Boolean, default: true },
   },
-  data () {
+  data() {
     return {
       classes: {
-        'mdc-snackbar--align-start': this.alignStart
+        'mdc-snackbar--align-start': this.alignStart,
       },
       message: '',
       actionText: '',
       hidden: false,
       actionHidden: false,
-    }
+    };
   },
   methods: {
-    show (data) {
-      this.foundation.show(data)
-    }
+    show(data) {
+      this.foundation.show(data);
+    },
   },
-  mounted () {
+  mounted() {
     this.foundation = new MDCSnackbarFoundation({
-      addClass: (className) => this.$set(this.classes, className, true),
-      removeClass: (className) => this.$delete(this.classes, className),
-      setAriaHidden: () => this.hidden = true,
-      unsetAriaHidden: () => this.hidden = false,
-      setActionAriaHidden: () => this.actionHidden = true,
-      unsetActionAriaHidden: () => this.actionHidden = false,
-      setActionText: (text) => { this.actionText = text },
-      setMessageText: (text) => { this.message = text  },
+      addClass: className => this.$set(this.classes, className, true),
+      removeClass: className => this.$delete(this.classes, className),
+      setAriaHidden: () => (this.hidden = true),
+      unsetAriaHidden: () => (this.hidden = false),
+      setActionAriaHidden: () => (this.actionHidden = true),
+      unsetActionAriaHidden: () => (this.actionHidden = false),
+      setActionText: text => {
+        this.actionText = text;
+      },
+      setMessageText: text => {
+        this.message = text;
+      },
       setFocus: () => this.$refs.button.focus(),
       visibilityIsHidden: () => document.hidden,
-      registerCapturedBlurHandler: (handler) => this.$refs.button.addEventListener('blur', handler, true),
-      deregisterCapturedBlurHandler: (handler) => this.$refs.button.removeEventListener('blur', handler, true),
-      registerVisibilityChangeHandler: (handler) => document.addEventListener('visibilitychange', handler),
-      deregisterVisibilityChangeHandler: (handler) => document.removeEventListener('visibilitychange', handler),
+      registerCapturedBlurHandler: handler =>
+        this.$refs.button.addEventListener('blur', handler, true),
+      deregisterCapturedBlurHandler: handler =>
+        this.$refs.button.removeEventListener('blur', handler, true),
+      registerVisibilityChangeHandler: handler =>
+        document.addEventListener('visibilitychange', handler),
+      deregisterVisibilityChangeHandler: handler =>
+        document.removeEventListener('visibilitychange', handler),
       registerCapturedInteractionHandler: (evt, handler) =>
         document.body.addEventListener(evt, handler, true),
       deregisterCapturedInteractionHandler: (evt, handler) =>
         document.body.removeEventListener(evt, handler, true),
-      registerActionClickHandler: (handler) => this.$refs.button.addEventListener('click', handler),
-      deregisterActionClickHandler: (handler) => this.$refs.button.removeEventListener('click', handler),
-      registerTransitionEndHandler: (handler) => {
-        this.$refs.root.addEventListener(getCorrectEventName(window, 'transitionend'), handler)
+      registerActionClickHandler: handler =>
+        this.$refs.button.addEventListener('click', handler),
+      deregisterActionClickHandler: handler =>
+        this.$refs.button.removeEventListener('click', handler),
+      registerTransitionEndHandler: handler => {
+        this.$refs.root.addEventListener(
+          getCorrectEventName(window, 'transitionend'),
+          handler,
+        );
       },
-      deregisterTransitionEndHandler: (handler) => {
-        this.$refs.root.removeEventListener(getCorrectEventName(window, 'transitionend'), handler)
+      deregisterTransitionEndHandler: handler => {
+        this.$refs.root.removeEventListener(
+          getCorrectEventName(window, 'transitionend'),
+          handler,
+        );
       },
       notifyShow: () => this.$emit('show'),
       notifyHide: () => this.$emit('hide'),
-    })
-    this.foundation.init()
+    });
+    this.foundation.init();
     if (this.event) {
-      this.eventSource.$on(this.event, (data) => {
-        this.foundation.show(data)
-      })
+      this.eventSource.$on(this.event, this.show);
+    }
+    this.foundation.setDismissOnAction(this.dismissesOnAction);
+  },
+  beforeDestroy() {
+    if (this.eventSource) {
+      this.eventSource.$of(this.event, this.show);
     }
-    this.foundation.setDismissOnAction(this.dismissesOnAction)
+    this.foundation.destroy();
   },
-  beforeDestroy () {
-    this.foundation.destroy()
-  }
-}
+};
 </script>