0

iron-data-tableその行の 1 つの詳細を表示および編集するために使用したいと考えています。行の詳細を main の自己完結型のサブ要素にしたいiron-data-table。この 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>
行詳細.html 
<template>
  <paper-input value="{{item.comment}}"</paper-input>
</template>

用紙入力の内側をクリックしてフォーカスすると、セクションが閉じるという予期しない動作が発生しますrow-detail。したがって、編集を防ぎます。

paper-inputこの変更は、要素をiron-data-table直接移動して独自のサブ要素 (現在要素と呼んでいるもの)に移動した場合にのみ発生しrow-detailます。

この問題の原因とその修正方法を誰かが提案できますか? また、この問題に対する回答が得られることを期待して、明確な質問にお答えいたします。

4

2 に答える 2

1

問題は、クリック イベントがフォーカス可能な要素で発生したかどうかを検出していると思います。

tabIndex: 0回避策として、要素への設定を試すことができますrow-detail。

于 2016-08-01T07:23:56.173 に答える
0

完全を期すために、問題を修正した@Sauliによって提供された受け入れられた回答のコードは次のとおりです。

items-list.html 
<template is="row-detail">
  <div class="detail">
    <row-detail item="{{item}}" tabindex="0"></row-detail>
  </div>
</template>
于 2016-08-01T07:58:22.150 に答える