Amphtml: Hidden amp-list does not pick up consecutive [src] changes on unhiding

Created on 24 Jan 2018  路  4Comments  路  Source: ampproject/amphtml

What's the issue?

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().

How do we reproduce the issue?

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:

  1. Click on first item of first list, see according image displayed
  2. Click on second item of first list, see according different image displayed

Stale content if using "Reset" link that resets "step" state:

  1. Click on first item of first list, see according image displayed
  2. Click "Reset", image will disappear
  3. Click on second item of first list, previous image appears again, amp-list did not pick up the new "resultId" state value.

What browsers are affected?

Verified on Chrome 63 OSX + iOS Safari 11

Which AMP version is affected?

Version 1516396600278
Since we currently develop a new app we have no reference points against previous versions of AMP.

Soon Bug

All 4 comments

//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/

Was this page helpful?
0 / 5 - 0 ratings