Использование withBackdrop для бумаги-диалога предотвращает фокусировку элементов управления с помощью вкладок

Question

У меня есть бумажный диалог, который использует свойство с фоном. Я заметил, что после щелчка в любом месте внутри бумажного диалога, который не использует свойство with-Background, я могу нажать клавишу табуляции, и браузер сфокусирует элемент ввода:

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-background, браузер не будет фокусировать элемент ввода:

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>

Есть ли способ создать задний фон и при этом разрешить навигацию по диалогу с помощью клавиатуры?

Информация об устройстве: я испытываю эту проблему при запуске Chrome v50 на OSX.

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>