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

adopted-ember-addons · Mar 17, 2020 · 3385132 · 3385132
1 parent b378800
commit 3385132
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
@@ -4,7 +4,7 @@
 import { or, bool, and } from '@ember/object/computed';
 
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 import { run } from '@ember/runloop';
 import { assert } from '@ember/debug';
@@ -58,10 +58,21 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
     return isEmpty(this.get('label')) || this.get('focused');
   }),
 
-  inputElementId: computed('elementId', function() {
-    return `input-${this.get('elementId')}`;
+  inputElementId: computed('elementId', {
+    get() {
+      return `input-${this.get('elementId')}`;
+    },
+    // elementId can be set from outside and it will override the computed value.
+    // Please check the deprecations for further details
+    // https://deprecations.emberjs.com/v3.x/#toc_computed-property-override
+    set(key, value) {
+      // To make sure the context updates properly, We are manually set value using @ember/object#set as recommended.
+      return set(this, "elementId", value);
+    }
   }),
 
+
+
   renderCharCount: computed('value', function() {
     let currentLength = this.get('value') ? this.get('value').length : 0;
     return `${currentLength}/${this.get('maxlength')}`;

diff --git a/addon/components/paper-speed-dial.js b/addon/components/paper-speed-dial.js
@@ -29,6 +29,17 @@ export default Component.extend({
     return this.get('animation') === 'fling' && !this.get('elementDidRender');
   }),
 
+  didInsertElement() {
+    this._super(...arguments);
+    this.element.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+    this.element.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
+  willDestroyElement() {
+    this._super(...arguments);
+    this.element.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
+
   didRender() {
     this._super(...arguments);
     run.next(() => {
@@ -38,11 +49,11 @@ export default Component.extend({
     });
   },
 
-  mouseEnter() {
+  handleMouseEnter() {
     invokeAction(this, 'onMouseEnter');
   },
 
-  mouseLeave() {
+  handleMouseLeave() {
     invokeAction(this, 'onMouseLeave');
   },
 

diff --git a/addon/mixins/events-mixin.js b/addon/mixins/events-mixin.js
@@ -8,6 +8,18 @@ import Mixin from '@ember/object/mixin';
  * @extends Ember.Mixin
  */
 export default Mixin.create({
+  didInsertElement() {
+    this._super(...arguments);
+    // Avoid attaching mouse events directly to component and it has been deprecated due to performance issue.
+    // Please check https://deprecations.emberjs.com/v3.x/#toc_action-mouseenter-leave-move
+    this.element.addEventListener('mouseMove', this.handleMouseMove.bind(this));
+    this.element.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
+  willDestroyElement() {
+    this._super(...arguments);
+    this.element.removeEventListener('mouseMove', this.handleMouseMove.bind(this));
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
   touchStart(e) {
     return this.down(e);
   },
@@ -23,7 +35,7 @@ export default Mixin.create({
   touchCancel(e) {
     return this.up(e);
   },
-  mouseLeave(e) {
+  handleMouseLeave(e) {
     return this.up(e);
   },
   up() {},
@@ -34,7 +46,7 @@ export default Mixin.create({
    * Move events
    */
 
-  mouseMove(e) {
+  handleMouseMove(e) {
     return this.move(e);
   },
 

diff --git a/addon/mixins/focusable-mixin.js b/addon/mixins/focusable-mixin.js
@@ -38,6 +38,18 @@ export default Mixin.create(EventsMixin, {
   // keyboard navigation.
   focusOnlyOnKey: false,
 
+  didInsertElement() {
+    this._super(...arguments);
+    this.element.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+    this.element.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this.element.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
+  },
+
   /*
    * Listen to `focusIn` and `focusOut` events instead of `focus` and `blur`.
    * This way we don't need to explicitly bubble the events.
@@ -53,12 +65,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);