Uncaught TypeError: this.keyEventTarget.addEventListener is not a function

[lpellegr]

Since an update to Polymer 2.4.0 I am getting the following error on a page that makes use of paper elements and iron-a11y-keys.

Reverting to Polymer 2.3.1 solves the issue.

Unfortunately, I am not able to reproduce in a minimal use case for now.

Here is the error if it can help:

Uncaught TypeError: this.keyEventTarget.addEventListener is not a function at HTMLElement. (iron-a11y-keys-behavior.html:441) at Array.forEach () at HTMLElement._listenKeyEventListeners (iron-a11y-keys-behavior.html:435) at HTMLElement.attached (iron-a11y-keys-behavior.html:329) at HTMLElement.attached (class.html:244) at HTMLElement.attached (class.html:242) at HTMLElement.connectedCallback (legacy-element-mixin.html:107) at HTMLElement._attachDom (element-mixin.html:593) at HTMLElement._readyClients (element-mixin.html:566) at HTMLElement._flushClients (property-effects.html:1565) (anonymous) @ iron-a11y-keys-behavior.html:441 _listenKeyEventListeners @ iron-a11y-keys-behavior.html:435 attached @ iron-a11y-keys-behavior.html:329 attached @ class.html:244 attached @ class.html:242 connectedCallback @ legacy-element-mixin.html:107 _attachDom @ element-mixin.html:593 _readyClients @ element-mixin.html:566 _flushClients @ property-effects.html:1565 _propertiesChanged @ property-effects.html:1699 _flushProperties @ properties-changed.html:325 _flushProperties @ property-effects.html:1551 ready @ property-effects.html:1656 ready @ element-mixin.html:551 _enableProperties @ properties-changed.html:308 connectedCallback @ properties-mixin.html:203 connectedCallback @ element-mixin.html:537 _attachDom @ element-mixin.html:593 _readyClients @ element-mixin.html:566 _flushClients @ property-effects.html:1565 _propertiesChanged @ property-effects.html:1699 _flushProperties @ properties-changed.html:325 _flushProperties @ property-effects.html:1551 ready @ property-effects.html:1656 ready @ element-mixin.html:551 ready @ noticeable-project-posts-upsert.html:282 _enableProperties @ properties-changed.html:308 connectedCallback @ properties-mixin.html:203 connectedCallback @ element-mixin.html:537 (anonymous) @ noticeable-project-posts-upsert.html:625

[TimvdLippe]

Hm, this is quite difficult for us to debug without a minimal reproducible case. Especially since we haven't heard of any other users encountering issues with this behavior. If it would be broken in 2.4, I would expect a quicker response of developers.

Nonetheless, we would like to investigate, but we can only do that with a minimal reproducible case. Maybe you can start with your own implementation and delete implementation over time until you minimized the overall implementation necessary to trigger the issue?

[200Puls]

Hi, we encounter the same problem. The error is:

iron-a11y-keys-behavior.html:441 Uncaught TypeError: this.keyEventTarget.addEventListener is not a function at HTMLElement. (iron-a11y-keys-behavior.html:441) at Array.forEach () at HTMLElement._listenKeyEventListeners (iron-a11y-keys-behavior.html:435) at HTMLElement.attached (iron-a11y-keys-behavior.html:329) at HTMLElement.attached (class.html:244) at HTMLElement.attached (class.html:242) at HTMLElement.connectedCallback (legacy-element-mixin.html:107) at HTMLElement._attachDom (element-mixin.html:593) at HTMLElement._readyClients (element-mixin.html:566) at HTMLElement._flushClients (property-effects.html:1565)

This leads to all our tests being broken.

[TimvdLippe]

Possibly the same issue as #5073?

[TimvdLippe]

The tests on https://github.com/PolymerElements/iron-a11y-keys-behavior master with Polymer 2.4.0 are passing, which means there is another factor that is breaking this issue. Therefore I am unable to confirm that #5075 fixes the issue.

@lpellegr @200Puls could one of you run bower install polymer/polymer#fix-5073 and check whether your application/tests are passing with these changes? If they are not, we require a JSBin/small project that we can debug to investigate the core issue. If we do not have such a reproduction case, I fear we will not be able to resolve this issue.

[200Puls]

For me its still failing with the same error. Although the line number have changed slightly (element-mixin)

iron-a11y-keys-behavior.html:441 Uncaught TypeError: this.keyEventTarget.addEventListener is not a function at HTMLElement. (iron-a11y-keys-behavior.html:441) at Array.forEach () at HTMLElement._listenKeyEventListeners (iron-a11y-keys-behavior.html:435) at HTMLElement.attached (iron-a11y-keys-behavior.html:329) at HTMLElement.attached (class.html:244) at HTMLElement.attached (class.html:242) at HTMLElement.connectedCallback (legacy-element-mixin.html:107) at HTMLElement._attachDom (element-mixin.html:590) at HTMLElement._readyClients (element-mixin.html:563) at HTMLElement._flushClients (property-effects.html:1565)

[lpellegr]

@TimvdLippe I confirm that polymer#fix-5073 is not fixing the problem.

I spent some more time and succeeded to reproduce on a minimal example:

• https://polymer-5069.glitch.me/
• https://glitch.com/edit/#!/polymer-5069?path=my-element.html:1:0

Hope it helps.

[kevinpschaaf]

Per the iron-accesibility-keys API docs:

The target properties must evaluate to a node.

That element has never supported deserializing string-based ID ref's to nodes, so the following usage is in error:

<iron-a11y-keys target="paperInput" ...></iron-a11y-keys>

The target="paper-input" was never actually targeting the paper input as intended in 2.3.0 either, since that element has never had code to translate a string-based attribute into a node.

The reason that this behavior changed in 2.4 is due to a community PR that restores a 1.x behavior around attribute deserialization for type: Objects to pass through the original string value if it cannot be parsed as JSON. This was a 1.x backward-compatibility fix for https://github.com/Polymer/polymer/issues/4464 via PR https://github.com/Polymer/polymer/pull/4956, and that change appears correct.

To fix your issue, you should remove the string value from the target attribute, and instead set/bind a node value in some other way, per the API docs.

[lpellegr]

Thank you a lot for the explanations.