将iron-data-table内的纸张输入移动到其自己的子元素会导致行详细信息在被聚焦时崩溃

Question

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

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

items-list.html

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

但是，下面的模式会产生意外的行为。

items-list.html

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

row-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提供的修复问题的可接受答案的代码如下：

items-list.html

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