Fix[1134] mouseEnter/Leave/Move deprecations by addinng event listeners

adopted-ember-addons · Mar 16, 2020 · cc42471 · cc42471
1 parent b378800
commit cc42471
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/addon/mixins/events-mixin.js b/addon/mixins/events-mixin.js
@@ -7,44 +7,61 @@ import Mixin from '@ember/object/mixin';
  * @class EventsMixin
  * @extends Ember.Mixin
  */
-export default Mixin.create({
+export default class EventsMixin extends(Mixin) {
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+  }
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+  }
+
   touchStart(e) {
     return this.down(e);
-  },
+  }
+
   mouseDown(e) {
     this.down(e);
-  },
+  }
+
   touchEnd(e) {
     return this.up(e);
-  },
+  }
+
   mouseUp(e) {
     return this.up(e);
-  },
+  }
+
   touchCancel(e) {
     return this.up(e);
-  },
-  mouseLeave(e) {
+  }
+
+  handleMouseLeave(e) {
     return this.up(e);
-  },
-  up() {},
-  down() {},
-  contextMenu() {},
+  }
+
+  up() {}
+  down() {}
+  contextMenu() {}
 
   /*
    * Move events
    */
 
   mouseMove(e) {
     return this.move(e);
-  },
+  }
 
   touchMove(e) {
     return this.move(e);
-  },
+  }
 
   pointerMove(e) {
     return this.move(e);
-  },
+  }
 
   move() {}
-});
+}
diff --git a/addon/mixins/focusable-mixin.js b/addon/mixins/focusable-mixin.js
@@ -38,6 +38,21 @@ export default Mixin.create(EventsMixin, {
   // keyboard navigation.
   focusOnlyOnKey: false,
 
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    // Mouse event dispatcher has been deprciated
+    // https://deprecations.emberjs.com/v3.x/#toc_action-mouseenter-leave-move
+    this.element.addEventListener('mouseenter', this.handleMouseEnter);
+    this.element.addEventListener('mouseleave', this.handlemouseLeave);
+  },
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+    this.element.removeEventListener('mouseenter', this.handleMouseEnter);
+    this.element.removeEventListener('mouseleave', this.handlemouseLeave);
+  },
+
+
   /*
    * Listen to `focusIn` and `focusOut` events instead of `focus` and `blur`.
    * This way we don't need to explicitly bubble the events.
@@ -53,12 +68,12 @@ export default Mixin.create(EventsMixin, {
     this.set('focused', false);
   },
 
-  mouseEnter(e) {
+  handleMouseEnter(e) {
     this.set('hover', true);
     invokeAction(this, 'onMouseEnter', e);
   },
 
-  mouseLeave(e) {
+  handlemouseLeave(e) {
     this.set('hover', false);
     this._super(e);
     invokeAction(this, 'onMouseLeave', e);