Amphtml: Safari: amp-bind doesn't update <select> when option[selected] is mutated

[matijagrcic]

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

[aghassemi]

/to @choumx

[kevinkassimo]

Also does not work on desktop Safari.

Probably related to the problem that dynamically setting selected on <option> does not change the selected value on Safari (I saw that selected was 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)

[matijagrcic]

@kevinkassimo - correct, this is a blocker for us to move to AMP currently as such a basic functionality is broken. Hoping this would move to a major issue.

[choumx]

Thanks for the report. Probably an attribute vs. property issue. We already handle this correctly for <input> elements, just need to add <select> too.

[choumx]

Hmm, which version of Safari are you running? Calling e.setAttribute('selected', ...) does appear to update the selected property. Maybe I'm missing something.

[matijagrcic]

The HTML is updated, the selected is added to the option, but the dropdown doesn't change the text value.
As soon as I tap to open the dropdown it changes the text to correct value.

[choumx]

Ok, it looks like Safari just doesn't update the select/option element when one of them is changed programmatically. We'll just need to do it manually for Safari.

[matijagrcic]

Not sure i follow, what do you mean by

do it manually for Safari.

Also this seems similar to jQuery, where they use .prop() not .attr() as using .attr() is wrong for the dynamic state of a form element (https://jquery.com/upgrade-guide/1.9/#attr-versus-prop-).

When I try

document.getElementById("selected-variant").options.selectedIndex = 2;

the text value is changed and HTML updated properly on Safari.

[choumx]

I initially thought this was the same issue as the jQuery example but it's actually unrelated. Browsers always sync the selected attribute and property.

Right, setting selectedIndex on the ancestor <select> element is what I meant by "manually".

[matijagrcic]

Perfect, will this change be on production anytime soon?

[matijagrcic]

@choumx @aghassemi Is there any update on this?

Also linking #18863

[AndrewKGuan]

Hi,
is there an update on this issue? Please let us know.

Thanks!

[choumx]

Going to schedule this for our end-of-year fix-it. Thanks for your patience!

[matijagrcic]

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.

[grandloser]

@matej-marcisovsky, were you able to verify this fix addressed the problem?

[osielccenviaflores]

Going to schedule this for our end-of-year fix-it. Thanks for your patience!

some update?