Ember.js: hasAttribute is not a function

[vcipriani]

We're getting a lot of errors from packages/ember-views/lib/system/event_dispatcher.js in our application. It stems from a call to target.hasAttribute('data-ember-action') because hasAttribute is not defined on target. I haven't been able to identify what event is causing it, but it seems it is likely something where window is the target.

I'll submit a PR if you want to let me know how you want to guard against this. Seems like changing the line to else if (target && target.hasAttribute && target.hasAttribute('data-ember-action')) would work. I'm assuming there is a reason its a do-while loop and not while, otherwise converting to a while loop should also prevent it.

We're running Ember 3.1.2. Also just fyi, we were previously receiving the same error on Ember 2.x when running ember-native-dom-event-dispatcher. I previously reported the issue in that repo.

Source Code

      let handleEvent = (this._eventHandlers[event] = event => {
        let target = event.target;

        do {
          if (viewRegistry[target.id]) {
            if (viewHandler(target, event) === false) {
              event.preventDefault();
              event.stopPropagation();
              break;
            }
          } else if (target.hasAttribute('data-ember-action')) {
            if (actionHandler(target, event) === false) {
              break;
            }
          }

          target = target.parentNode;
        } while (target && target.nodeType === 1);
      });

      rootElement.addEventListener(event, handleEvent);

[rwjblue]

Do you have a reproduction? Your guess is probably correct, but we really need to confirm what target actually is (that doesn't have hasAttribute)...

[vcipriani]

Not yet, we'll work on one. Our logs don't provide a lot of insight. Thanks for the quick response.

[rwjblue]

No problem! We definitely want to get this fixed ASAP, so please let us know how we can help...

[timmorey]

I have been getting this error in IE11 when excluding jquery from the build, and I've got a repro case for it: https://github.com/timmorey/svg-has-attribute-error (sorry, tried to repro in a twiddle, but I couldn't get twiddle to run in IE11).

The error occurs when I hover over an <svg> with content injected through a <use> element. Here is the most simplified template with which I could repro:

<div style='display:none'>
  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="chevron" viewBox="0 0 16 16">
        <path d="M10.217 8l-6-6h2.766l6 6-6 6H4.217z"></path>
      </symbol>
    </defs>
  </svg>
</div>
<svg style="width:32px;height:32px;">
  <use xlink:href="#chevron"/>
</svg>

In chrome, firefox, safari, the above works fine. It also works fine in IE11 if I include jquery in the build.

[josemarluedke]

I just had this problem when trying to disable jquery from my app using Ember v3.3.0. I'm on Firefox 62.0b8 (64-bit). This does not happen on Chrome.

Here is a simple reproduction for my case:

<a
  href="#"
  onclick={{action 'changeTimeframe' 'someValue'}}
  class="btn-tab">
  My Link
</a>

The error is triggered when I hover the link.

[mm2ha]

We are having the same issue in our application that is running on Ember 3.1.2.

It seems to happen in the following scenarios:

• User drags link with text and drops it across another text (the end point is less clear)
• User selects text and drags the selected text and drops it somewhere on the page
  (note - I could only reproduce in Firefox but we have had reports of it occurring in Chrome as well)

The way I got around it was to disable drag events in customEvents in app.js.

const customEvents = {
    dragstart: null,
    drag: null,
    dragenter: null,
    dragleave: null,
    dragover: null,
    dragend: null
};

const App = Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    Resolver,
    customEvents
});

loadInitializers(App, config.modulePrefix);

export default App;

This solution is not ideal but it seems like it might solve our issue until this bug is fixed.

[josemarluedke]

I have created a reproduction for the error I'm getting. The error only appears in firefox.

https://github.com/josemarluedke/--has-attribute-bug

Interestingly, the problem only appears when styles are applied. In the app I have described how to reproduce.

[simonihmig]

I am seeing this as well in Sentry logs. FWIW, most events were Firefox, but occasionally also Chrome...

[rwjblue]

Is this still an issue for folks on 3.6.0?

[jordanbyron]

@rwjblue we are still seeing this in Ember 3.7.0 + IE 11 with jQuery disabled.

[mastastealth]

@rwjblue I am also still seeing this on 3.7 in Firefox 64

[josemarluedke]

I'm still seeing this in Ember v3.12.0-canary+106bb03e without jQuery.

[josemarluedke]

I was able to get a PR to fix this issue. The fix was obvious simple, but creating a test for it was a challenge.

https://github.com/emberjs/ember.js/pull/18064