Polymer message box with default button

Question

Using Polymer 2 and paper-dialog I have created message boxes for my application. For the usual information boxes with only an OK button I would like the enter key to trigger the same handler as the button does. Any idea how to accomplish this?

Note that I also implemented an InputBox and there I used the on-keydown event of the single input element. But for an information box there is no text input element - only static text and an OK button.

Answer 1

You could use a keydown-handler on the paper-dialog itself, and have that handler trigger the button's click-handler:

<paper-dialog on-keydown="_onDialogKeyDown">
  <button id="myButton" on-click="_submit">OK</button>
</paper-dialog>

// in Polymer element
_onDialogKeyDown(e) {
  if (e.keyCode === 13) {
    this.$.myButton.click();
  }
}

demo