Template.rendered with polymer dropdown ,best solution?

help
1

Hi,

(Newbie with Meteor but very enthusiastic)
I am using a polymer dropdown and creating the menu items (chips) with a template #each command.
However, the elements in the dropdown are coming from an XHR request that takes a couple of seconds.

The dropdown:

    <paper-chip-dropdown flex label="Select one or more contacts" keys="tab">
    <input type="text" name="searchValue" is="core-input" class="searchValue"  autofocus placeholder="Select something" flex>
    <paper-dropdown class="dropdown" >
        <core-menu>

                {{> searchItems}}
                <!-- {{#each searchResult }}

                <paper-chip src="{{artwork}}">
                    <div class="body">{{trackName}}</div>
                </paper-chip>
            {{/each}} -->
        </core-menu>
    </paper-dropdown>
</paper-chip-dropdown>

and the template for the chips:

<template name="searchItems">
{{#each searchResult }}
        <paper-chip src="{{artworkUrl30}}">
            <div class="body">{{trackName}}</div>
            <div class="caption">jamesspierings@gmail.com</div>
        </paper-chip>
{{/each}}

When I used to load the elements directly in the core-menu tag with an #each loop, the polymer element would already open its dropdown while the menu items where not rendered. This resulted in a very small dropdown ( 25px high).

I know this is partly a Polymer issue, I have slightly adapted a paper-dropdown-menu by adding a search field in it.
The dropdown seems not like rendering without the chips in it. I haven’t found a way to triggered a re-render after the amount of chips (menuitems) has changed.

Anyway, I tracked down the issue that the Polymer dropdown should only trigger its dropdown when the menu elements a rendered.

So I added the menu items to a separate template so that I could set a template.rendered function.
This of course triggers twice, on first template render and one time when I search something in the text field.

So I used the Tracker.autorun to monitor a session which get the result from the XHR query:

Template.searchItems.rendered = ->
Tracker.autorun ->
    if Session.get( 'searchResults' )
        // this make the dropdown to reset its height for the next xhr call
        document.querySelector('paper-dropdown').$.scroller.style.height='' 
        document.querySelector('paper-dropdown').toggle()
    return

Template.searchItems.helpers
searchResult: ->
    if Session.get( 'searchResults' )
        return Session.get( 'searchResults' )
    return

and toggles the dropdown.

So far, this is the best solution I have so far, but its not perfect.
I find it a bit complex to do it like this, but it’s the only way I could think of of triggering the menu dropdown Toggle after the data has been retrieved.

What I really want is when you start typing that the dropdown already opens and gives you results (typeahead). However, all results come from and external API and are not super fast (1-2 seconds), so I think that would kill the typeahead.

So maybe in this case my solution is adequate?
Would love to hear your opinion.

Cheers