Can't see paper-typeahead-input values when in cell of iron-data-table

[joebordes]

Hi,

I am trying to put a paper-typeahead-input inside a cell. In general I am putting all types of inputs with great success but this component has it's values hidden under the cell.

I created a ticket on that repository but since I am not sure where the problem is I thought I would report it here also, just in case.

cheonhyangzhang/paper-typeahead-input#29

Thanks

[Saulis]

Hi,

this happens because of <iron-dropdown> places its overlay element inside itself – it becomes overlapped by the other row elements in the <iron-list> that have their own stacking contexts because of translating.

This is a fundamental issue that affects all components using <iron-dropdown> like <paper-menu>. I suggest using <vaadin-combo-box> which doesn't have this problem.

[joebordes]

Thanks for the information.
I can't use vaadin-combo-box because it doesn't support remote data (at least to the best of my knowledge). I am searching against a database via ajax to filter the information. Do you know of any other component that would permit me to do that and work well with iron-data-table?

[Saulis]

vaadin-combo-box is the only component I know of that handles overlays so that they work within translated elements like iron-list and iron-data-table

Remote data is on the backlog: vaadin/vaadin-combo-box#260 – meanwhile, you might be able to make a remote datasource work with the custom input element feature just released in 1.1.

Try hooking up an iron-ajax to the items property and trigger it to query for data when the value on your input changes.

[web-padawan]

@joebordes you can listen for iron-overlay-opened event and then set the z-index property of the corresponding iron-list item to 1 as mentioned here.

[joebordes]

@Saulis thanks for the pointer, I will give that a try and update the issue. Feel free to close whenever you consider.

@web-padawan that definitely helped. I played around a bit and achieved something but I'm afraid I don't know enough to fix it completely. I will keep trying. I forked and updated plunker with my latest changes (mostly CSS and the patch you reference above).

http://plnkr.co/edit/eWKGAd?p=preview