ampproject / ampproject/amphtml
AMP Binds not functioning correctly
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## What's the issue?
Adding as a GH issue as per a thread on Slack.
We've encountered an issue where some functionality does not work for amp binds. Specifically on our basket page the binds we attach to our 'Delivery Method' selector and 'Discount Code' box aren't opening the relevant sections. For example clicking the discount code does correctly set the state for `basketDiscountCode` (toggles true/fals), however the `[hidden]="!basketDiscountCode"` we use to show the discount input in the DOM doesn't trigger, even though the state seems correct.
- If I first interact with the 'Delivery To' amp-selector and select a country, then everything else kicks in and works.
- If I remove the 'Delivery To' completely (before it's rendered in the DOM) then the other aspects will work
- If I remove either the binded `[class]` or `[hidden]` from each button within the 'Delivery To' amp-selector it'll work (**see SS below**)
- AMP validates for me and other than an ampdoc issue for analytics (which I've tested disabling) I don't have any console errors with `#development=1`
- @sebastianbenz did find a `[CustomElement] Cannot resize element and overflow is not available` error but I'm not getting that in my console

We have several AMP-only sites all with very similar code but none showing this issue. The example this is an issue on is www.panemirates.com/uae/en, but this site has some near identical fascia sites for different locales that do not have this issue. If you need to compare between them then you'll need to set your `locale_prefix` cookie to `uae%2Fen` for the site with the issue, or to `ksa%2Fen` for a site without the issue (which should take you to www.panemirates/ksa/en).
## How do we reproduce the issue?
1. Go to https://www.panemirates.com/uae/en/pan-beryl-garden-sign-wall-deco-multi-12x12cm-p15447 and add the product to your basket
2. Go to the basket page at https://www.panemirates.com/uae/en/basket
3. Try to open the 'Delivery Method' select or the 'Discount Code' toggle on the right side of the page
4. If you then open the 'Deliver To' select and select a country everything will begin working correctly

## What browsers are affected?
All.
## Which AMP version is affected?
2103261048002
I'm unsure how long this issue has been present but I suspect it has occurred within the last two months.
Contributor guide
Research direction
Reproduce the problem using the basket and product URLs in the issue, with AMP version 2103261048002, and compare the uae/en and ksa/en locales via the documented locale_prefix cookie. Start by checking the Delivery Method, Discount Code, and Deliver To AMP binds and the reported validation and console behavior. Done means the affected binds work before selecting a country without introducing AMP validation or console errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100