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

Question

Я хочу использовать iron-data-table отображать и редактировать детали одной из его строк. Я хочу, чтобы деталь строки была отдельным вложенным элементом iron-data-table, Подобно тому, что показано в этой демонстрации jsBin.

При запуске из локального репо на моем локальном сервере, следующий шаблон производит ожидаемое поведение.

детал-list.html

<template is="row-detail">
  <div class="detail">
    <paper-input value="{{item.comment}}"</paper-input>
  </div>
</template>

Однако следующий шаблон приводит к неожиданному поведению.

детал-list.html

<template is="row-detail">
  <div class="detail">
    <row-detail item="{{item}}"></row-detail>
  </div>
</template>

рядного detail.html

<template>
  <paper-input value="{{item.comment}}"</paper-input>
</template>

Неожиданное поведение заключается в том, что щелчок внутри бумажного ввода для его фокусировки закрывает row-detail раздел. Таким образом предотвращая редактирование.

Это изменение происходит, когда и только когда я перемещаю paper-input элемент из iron-data-table непосредственно и в свой собственный подэлемент (что я сейчас называю row-detail элемент).

Кто-нибудь может подсказать, что может быть причиной этой проблемы и как ее исправить? Я также был бы рад ответить на любые уточняющие вопросы в надежде получить ответ на этот вопрос.

Answer 1

Я думаю, что проблема заключается в обнаружении того, произошло ли событие щелчка на фокусируемом элементе или нет.

В качестве обходного пути вы можете попробовать установить tabIndex: 0 в row-detail элемент.

Answer 2

Для полноты, код для принятого ответа, предоставленного @Sauli, который устранил проблему, выглядит следующим образом:

детал-list.html

<template is="row-detail">
  <div class="detail">
    <row-detail item="{{item}}" tabindex="0"></row-detail>
  </div>
</template>