We are trying to dynamically update an amp-list using amp-bind [src] attributes. This works as expected when the amp-list is always visible ("hidden" not set). However, if the amp-list gets hidden, e.g., in a two step flow of selecting items, the amp-list no longer picks up changes pushed via AMP.setState().
High-level structure:
// {"items":[{"resultId":"1"},{"resultId":"2"},{"resultId":"3"}]}
<amp-list src="/data.json">
<template type="amp-mustache">
<div on="tap:AMP.setState({resultId: '{{resultId}}', step: 2})">
{{resultId}}
</div>
</template>
</amp-list>
<amp-list hidden [hidden]="step != 2" [src]="'https://server/images?id=' + resultId">
<template type="amp-mustache">
... render ...
</template>
</amp-list>
<div hidden [hidden]="step != 2" on="tap:AMP.setState({step: 1})">Reset</div>
Demo: https://amp-live-list-form.glitch.me/amp-list-src.html
Works as expected when second amp-list stays always visible:
Stale content if using "Reset" link that resets "step" state:
Verified on Chrome 63 OSX + iOS Safari 11
Version 1516396600278
Since we currently develop a new app we have no reference points against previous versions of AMP.
//cc @choumx
Ah, the problem is that this.getLayoutWidth() > 0 is an imperfect proxy for "layoutCallback() has been called". Should be an easy fix -- coming up soon. Sorry about that!
/cc @aghassemi You were right. 馃槄
/for once/