将 iron-data-table 内的 paper-input 移动到它自己的子元素会导致 row-detail 在聚焦时折叠

Question

我想使用 iron-data-table 来显示和编辑其中一行的详细信息。我希望行详细信息成为主要 iron-data-table 的独立子元素。 Similar to what is shown by this jsBin demo.

当运行来自本地服务器上的本地存储库时，以下模式会产生预期的行为。

项目-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>

Moving paper-input inside iron-data-table to its own sub-element causes row-detail to collapse when focused