Unable to reuse paper-ripple element after detached has been called

[Sleeckx]

Description

Moving an element that contains paper-ripple, or paper-ripple itself, from one location in the DOM to another will cause an error. Maybe the keyEventTarget should be set to this instead of null in the detached function, since this is also the default value for this property in the iron-a11y-keys-behavior?

Edit: Just noticed this is already up for discussion PolymerElements/paper-ripple/pull/79

Expected outcome

Paper-ripple elements should be able to move around in the DOM freely.

Actual outcome

iron-a11y-keys-behavior throws an error during attached:

TypeError: Cannot read property 'addEventListener' of null at paper-ripple.<anonymous> (https://polygit.org/components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html:404:30)

Live Demo

https://jsbin.com/hitayuvode/edit?html,console,output

Steps to reproduce

1. Put a paper-ripple element in the page.
2. Move the paper-ripple from one container to another.

   Browsers Affected

• [X] Chrome
• [X] Firefox
• [X] Edge
• [X] IE 11

[notwaldorf]

/cc @valdrinkoshi @dschuyler

Valdrin: I think this has been introduced by the other PR we merged. Should we revert it in the meantime?

[valdrinkoshi]

I believe the bug is in iron-a11y-keys-behavior which should accept null as valid value and handle it (it is currently being done in this PR https://github.com/PolymerElements/iron-a11y-keys-behavior/pull/47).

[Sleeckx]

@valdrinkoshi I'm afraid the above issue is still present in the current build..

[valdrinkoshi]

That's correct, this gets fixed by https://github.com/PolymerElements/iron-a11y-keys-behavior/pull/48