html - 将 withBackdrop 用于纸质对话框可防止控件通过选项卡聚焦

Question

我有一个使用 with-backdrop 属性的纸质对话框。我注意到，在不使用 with-backdrop 属性的纸质对话框中单击任何位置后，我可以点击 tab 键，浏览器将聚焦输入元素：

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>

但是，如果我设置 with-backdrop 属性，浏览器将不会聚焦输入元素：

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>

有没有办法有一个背景，仍然允许对话框通过键盘导航？

设备信息：我在 OSX 上运行 Chrome v50 时遇到了这个问题。

Answer 1

您使用的版本似乎有问题。我在 Polymer 的网站和我的本地网站上进行了尝试，这似乎工作正常。以下是我使用的版本：

纸质对话：1.0.4

聚合物：1.3.2

进纸：1.0.18

我还建议你在 Github 上打开一个同样的问题

Answer 2

在演示中，我在输入元素中包含了 tabindex 属性，但没有指定值。删除此属性允许输入聚焦：

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"
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>