search

Saulis / iron-data-table

iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer.
Apache License 2.0
147 stars 66 forks source link

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

Closed maria-le closed 8 years ago

maria-le commented 8 years ago

See this question on StackOverflow.

Saulis commented 8 years ago

Hi!

When a row is clicked, localTarget for the click is checked for focus. If the target is focusable, then the row will not be selected/expanded. In your case, localTarget doesn't penetrate the shadow root of an element and therefore it doesn't know that paper-input (or the input inside that) is focused. So, localTarget returns row-detail element which is not focused.

I've tried also using rootTarget for checking the focused element, but that doesn't work with components like paper-checkbox which doesn't have an input inside at all.

So, as I've answered in the Stack, the correct way to work around this issue is to make your wrapping custom element focusable. For example, by setting tabindex="0" to it.