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

Question

我想用它iron-data-table来显示和编辑其中一行的详细信息。我希望行详细信息成为 main 的独立子元素iron-data-table。类似于此 jsBin 演示所显示的内容。

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

项目列表.html

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

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

项目列表.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-detailelement.

Answer 2

为了完整起见，@Sauli 提供的解决问题的已接受答案的代码如下：

项目列表.html

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