How to use IronA11yKeysBehavior in Polymer 2.x correctly

Question

I'm trying to create a new element for Polymer 2.x in class syntax, but now I can't use the IronA11yKeysBehavior. What am I doing wrong here?

<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/polymer/polymer.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.0.0/paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! Pressing enter should show an alert message. [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    class MyControl extends Polymer.mixinBehaviors([
      Polymer.IronA11yKeysBehavior
    ], Polymer.Element){
      static get is(){return 'my-control'; }
      static get keyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      static get instanceKeyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      _updatePressed(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
      }
    }
    customElements.define(MyControl.is, MyControl);
  </script>
</dom-module>


<my-control></my-control>

When I use the old syntax, everything works fine.

<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/polymer/polymer.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.0.0/paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    Polymer({
    is: 'my-control',
    behaviors: [
      Polymer.IronA11yKeysBehavior
    ],
    keyBindings: { 'enter': '_updatePressed' },
		_updatePressed: function(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
    }
  });
  </script>
</dom-module>
<my-control></my-control>

How do I use the behavior with the new class syntax?

Answer 1

keyBindings should be an instance getter instead of a static one. Otherwise, it looks like your code is correct.

class MyControl extends Polymer.mixinBehaviors([Polymer. IronA11yKeysBehavior], Polymer.Element) {
  // static get keyBindings() { ... }   // DON'T DO THIS
  get keyBindings() { ... }             // DO THIS
}

Here's your code snippet corrected:

<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! Pressing enter should show an alert message. [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    class MyControl extends Polymer.mixinBehaviors([
      Polymer.IronA11yKeysBehavior
    ], Polymer.Element){
      static get is(){return 'my-control'; }
      get keyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      static get instanceKeyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      _updatePressed(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
      }
    }
    customElements.define(MyControl.is, MyControl);
  </script>
</dom-module>


<my-control></my-control>

It looks like the IronA11yKeysBehavior repo currently only has a legacy demo, but I've translated it to Polymer 2's class based syntax in this Codepen.