将iron-data-table内的纸张输入移动到其自己的子元素会导致行细节在聚焦时折叠

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>