Moving paper-input inside iron-data-table to its own sub-element causes row-detail to collapse when focused

Question

I want to use iron-data-table to display and edit the details of one of its rows. I want the row detail to be a self-contained sub-element to the main iron-data-table. Similar to what is shown by this jsBin demo.

When run from a local repo on my local server, the following pattern produces the expected behavior.

items-list.html

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

However, the following pattern produces unexpected behavior.

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>

The unexpected behavior is that the act of clicking inside the paper input to focus it, closes the row-detail section. Thus preventing editing.

This change occurs when and only when I move the paper-input element out of the iron-data-table directly and into it's own sub-element (what I'm currently calling the row-detail element).

Can anyone suggest what might be causing this problem and how to fix it? I would also be happy to respond to any clarifying questions in hopes of getting an answer to this issue.

Answer 1

I think the problem is detecting whether the click event happened on a focusable element or not.

As a workaround, you can try setting tabIndex: 0 to row-detail element.

Answer 2

For completeness, the code to the accepted answer provided by @Sauli that fixed the problem is as follows:

items-list.html

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