amphtml: Safari: amp-bind doesn't update
What’s the issue?
AMP.setState doesn’t update the select element on Safari.
How do we reproduce the issue?
Given a simple amp-selector
<amp-selector layout="container" on="select:AMP.setState({ selectedVariantState: { variantSku: event.targetOption, variantQuantity: 1 }})" [selected]="selectedVariantState.variantSku">
<amp-img src="image.gif" width="64" height="64" option="12345-12345"></amp-img>
//more images omitted for brevity
</amp-selector >
<select on="change:AMP.setState({ selectedVariantState: { variantSku: event.value, variantQuantity: 1 }})">
<option value="-1" selected="selectedVariantState.variantSku == ''">Select</option>
<optgroup label="Group Name">
<option [selected]="selectedVariantState.variantSku == '12345-12345'" value="12345-12345">
Some Value
</option>
</optgroup>
//more optgroups and options, omitted for brevity
</select>
What browsers are affected?
Mobile Safari
Which AMP version is affected?
All versions
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 17 (2 by maintainers)
Thanks @choumx . Will verify this next week and we should then finally be able to push the AMP version of our product detail pages which contain multiple variants.
Going to schedule this for our end-of-year fix-it. Thanks for your patience!
I initially thought this was the same issue as the jQuery example but it’s actually unrelated. Browsers always sync the
selectedattribute and property.Right, setting
selectedIndexon the ancestor<select>element is what I meant by “manually”.Thanks for the report. Probably an attribute vs. property issue. We already handle this correctly for
<input>elements, just need to add<select>too.Also does not work on desktop Safari.
Probably related to the problem that dynamically setting
selectedon<option>does not change the selected value on Safari (I saw thatselectedwas correctly set on<option value="12345-12345">on Safari also, but simply the displayed value of selection does not change) (seen previously for jQuery also)