Getting uncaught error in ember

Question

When I'm doing the right click option for more than 5 (approx) times for certain task, it showing uncaught error as like below:

Uncaught TypeError: Cannot read property 'find' of undefined
    at Class.<anonymous> (core.js:21487)
    at fn (core.js:7779)
    at DeferredActionQueues.flush (core.js:7723)
    at Backburner.end (core.js:7738)
    at Backburner.run (core.js:7748)
    at executeTimers (core.js:7824)
    at core.js:7822

In that Place I'm having the below code:

Ember.run.later(view, function () {
    this.$().find('menu-item:eq(0)').focus();
}, 125);

Can anyone please suggest me why this error is coming and I need to avoid this error while right clicking the task for "n" number of time also. I'm new to the ember. Your help will be appreciate. Thanks in advance.

Answer 1

Thats a simple javascript issue. In the second line this.$() returns undefined , and so it can't call .find on undefined.

More interesting is why this.$() is undefined. Probably you have this code inside a component, and try to access the local jQuery instance . However you call it inside an anonymous function(){} , which breaks your this -context (because it gets a new one).

The best solution here is to use an arrow function:

Ember.run.later(view, () => {
  this.$().find('menu-item:eq(0)').focus();
}, 125);

this prevents the outer this context, which is nice. Another options is to save this:

const self = this;
Ember.run.later(view, function () {
  self.$().find('menu-item:eq(0)').focus();
}, 125);

Or you can .bind(this) :

Ember.run.later(view, (function () {
  this.$().find('menu-item:eq(0)').focus();
}).bind(this), 125);

I can definitely recommend the first option, especially when using ember(-cli) which gives you transpilation anyway.