將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>