I have a paper-dialog that uses the with-backdrop property. I've noticed that after clicking anywhere within a paper-dialog that does not use the with-backdrop property, I can hit the tab key and the browser will focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
If I set the with-backdrop property, however, the browser will not focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog with-backdrop>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
Is there a way to have a backdrop and still allow the dialog to navigatable via the keyboard?
Device info: I am experiencing this issue running Chrome v50 on OSX.
In the demo, I included the tabindex attribute in my input element without specifying a value. Removing this property allowed the input to be focused: