AMP-LIST does not render elements on initial load when using client side filter

Question

I am trying to implement client-side filtering by following this doc
But the problem i am having is that, when the page is loaded initially the list is empty (amp-list does not populate the list from the remote url), but when i start typing some query the functionality works as expected.

Following are the snippets from my implementation:

<amp-state id="citiesList" src="//.../citiesList.json"></amp-state>

<input on="input-debounced:AMP.setState({filteredCities: citiesList.items.filter(a => event.value=='' ? true : a.name.toLowerCase().indexOf(event.value.toLowerCase())>=0)})">

<amp-list [src]="filteredCities" src="//.../citiesList.json" layout="fixed-height" height="350" [height]="(48)*filteredCities.length">
    <template type="amp-mustache">
        <li>
            <span>{{name}}</span>
        </li>
    </template>
        <div overflow class="list-overflow"></div>
</amp-list>

And in console i can see a warning related to this:

Default value (//.../citiesList.json) does not match first result (null) for <AMP-LIST [src]="filteredCities">. We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

One more thing to note here is that the input field is visible on pressing a dropdown button.

Answer 1

I got to fix this by writing the following code on my select button :

<button on="tap:AMP.setState({filteredCities: citiesList.items})" tabindex="0">

But i am sure if this the best way to do this.