hasAttribute is not a function

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);

[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.

[jordanbyron]

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