iron-a11y-keys issue with Polymer 2.0-preview

[Alos]

Description

I'm trying to add a iron-a11y-keys to catch for any enter keys on a beautiful element that contains a <paper-dialog>. As per the instructions I have a property that looks like this:

_loginDialog: {
                type: Object,
                value: function(){
                  return this.$.loginDialog;
                }
            }

And then the iron-a11y-keys that look like this:

<iron-a11y-keys target="[[_loginDialog]]" keys="enter" on-keys-pressed="_login"></iron-a11y-keys>

As soon as the element shows on screen I get the following error:

Uncaught TypeError: Cannot read property '_loginDialog_' of undefined(…)

So it looks like by the time Polymer is setting up the properties, the reference to the element in the template is null. Maybe related to the new life cycle of the elements? Please tell me if I'm doing something wrong. I'm still a Polymer newb.

Expected outcome

The iron-a11y-keys should be able to register an element as the element is being constructed.

Actual outcome

After adding a iron-a11y-keys on a project with Polymer 2.0-preview with a class style element I get a:

Uncaught TypeError: Cannot read property 'loginDialog' of undefined(…)

Live Demo

Can't do these from work :(

Steps to reproduce

1. Put a iron-a11y-keys element in an application using Polymer 2.0-Preview and class style elements.
2. Make the iron-a11y-keys reference a property that it self references an element on the template.
3. Run polymer serve and see an error on the console.

Tested in

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[valdrinkoshi]

Hi @Alos, iron-a11y-keys will listen for the specified keyboard events on the target, so it depends what's the desired behavior. If you want to listen for enter pressed on the element in order to open the dialog, then you'll need to set the target as the element itself and make the element focusable, or even better just implement the iron-a11y-keys-behavior on your element like this http://jsbin.com/fulozic/3/edit?html,output

[Alos]

@valdrinkoshi hi! Thanks for responding. So I want to listen for enter events in my dialog to allow the user to hit enter to submit the login form. I want the iron-a11y-keys target to be set to my paper-dialog. This causes an error. Perhaps implementing the iron-a11y-keys-behavior would be better. Let me investigate.

[valdrinkoshi]

Oh I see..yeah there is a problem in how polymer works in 2.0-preview compared to 1.x, I'll file an issue with a simplified test case soon. For now consider setting _loginDialog in ready like this http://jsbin.com/fulozic/4/edit?html,output (as you can see in 1.x the way you were doing it, through property default value is working as expected http://jsbin.com/fulozic/5/edit?html,console,output)

[Alos]

On class based elements readymethod is not really working. I'll set it in connectedCallback and see if it works, Thanks for all the help!

[valdrinkoshi]

Filed the issue here https://github.com/Polymer/polymer/issues/4160

[valdrinkoshi]

@Alos ready is a method of Polymer.Element http://jsbin.com/fulozic/6/edit?html,output Will close this issue & continue discussion in https://github.com/Polymer/polymer/issues/4160