Amp-lightbox-gallery - Thumbnails showing the wrong image when clicked.

[SimonHogstromRonbol]

Description

I've come across a bug when making an amp-image-gallery with thumbnails, connected to the action on the thumbnail itself. The 2rd time the gallery is opened, the image that shows up in the lightbox, is the one prior to the image the thumbnail depicts.

Note: this issue only comes up when using thumbnails, and everything works fine if you just use full-size images with the lightbox attribute instead of thumbnails.

@sebastianbenz on slack advised that I filed this as a bug,

Reproduction Steps

https://codepen.io/sunturion/pen/eYvRxKY

• Click a thumbnail image to open the lightbox.
• Close the gallery.
• Click a different thumbnail.
• The image should now be the one prior to the one clicked, order wise.

Relevant Logs

No response

Browser(s) Affected

Chrome, Firefox, Edge

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

[nickFalcone]

I made an example on my fork and can reproduce the issue. Setting a breakpoint on enter_() reveals the expected sourceElement but the prior image gets displayed.

I get the following error when opening any image:

log.js:255 [Resource] Error: layoutComplete race

This error was mentioned in #30426.

Resizing the viewport before clicking an image produces the expected behavior.