ampproject / ampproject/amphtml

`select` element's value isn't always synchronized from `option`'s `data-amp-bind-selected`

Open
#33,521 5 comments 0 reactions 1 assignee Claimed by @rbeckthomas View on GitHub
P2: Soon Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

The `select` element's value (e.g. `selectElement.value` in JS, which corresponds to its appearance in the UI) isn't consistently synchronized from the `data-amp-bind-selected`'s value on `option` elements. Meaning, the `option` element with the `selected` attribute in the DOM will not correspond to the `select` element's value.

## How do we reproduce the issue?

The following [playground link](https://playground.amp.dev/?format=email&_gl=1*1lpzxfn*_ga*YW1wLV9Xb0dRSExhTjlveFA1Q2VhU2VtMkE.#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoTRlbWFpbCBsYW5nPSJlbiI+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogICAgPHN0eWxlIGFtcDRlbWFpbC1ib2lsZXJwbGF0ZT5ib2R5e3Zpc2liaWxpdHk6aGlkZGVufTwvc3R5bGU+CiAgICA8c2NyaXB0IGFzeW5jIGN1c3RvbS1lbGVtZW50PSJhbXAtbGlzdCIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtbGlzdC0wLjEuanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBhc3luYyBjdXN0b20tdGVtcGxhdGU9ImFtcC1tdXN0YWNoZSIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtbXVzdGFjaGUtMC4yLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1mb3JtIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1mb3JtLTAuMS5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IGFzeW5jIGN1c3RvbS1lbGVtZW50PSJhbXAtYmluZCIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtYmluZC0wLjEuanMiPjwvc2NyaXB0PgoKICAgIDxzdHlsZSBhbXAtY3VzdG9tPgogICAgICBmb3JtIHsKICAgICAgICBwYWRkaW5nOiA1cHg7CiAgICAgIH0KCiAgICAgIHNlbGVjdFtkaXNhYmxlZF0gewogICAgICAgIGN1cnNvcjogcHJvZ3Jlc3M7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLQoJICBHb29kIENhc2UgSW5zdHJ1Y3Rpb25zOgoKICAgICAgMS4gT3BlbiBDaHJvbWUgRGV2dG9vbHMKCSAgMi4gR28gdG8gdGhlIE5ldHdvcmsgdGFiCiAgICAgIDMuIEdvICJPZmZsaW5lIgogICAgICA0LiBDaGFuZ2UgdGhlIHNlbGVjdCdzIHZhbHVlCgoJICBOb3RpY2UgdGhhdCB0aGUgcmVxdWVzdCB0byB0aGUgc2VydmVyIGZhaWxzCiAgICAgIGFuZCB0aGF0IHRoZSBzZWxlY3QgZWxlbWVudCdzIHZhbHVlIGlzIHJldmVydGVkCiAgICAgIHRvIGl0cyBvcmlnaW5hbCB2YWx1ZS4gVGhpcyBpcyB0aGUgZ29vZCBiZWhhdmlvci4KCiAgICAgIEJhc2UgQ2FzZSBJbnN0cnVjdGlvbnM6CgkgIDEuIEdvIGJhY2sgIk9ubGluZSIKICAgICAgMi4gUmVmcmVzaCB0aGUgQU1QIHBhZ2UgKGNsZWFuIHN0YXRlKQogICAgICAzLiBDaGFuZ2UgdGhlIHNlbGVjdCdzIHZhbHVlIChzaG91bGQgc3VjY2VlZCkKICAgICAgNC4gR28gYmFjayAiT2ZmbGluZSIKICAgICAgNS4gQ2hhbmdlIHRoZSBzZWxlY3QncyB2YWx1ZQoKICAgICAgTm90aWNlIHRoYXQgdGhlIHJlcXVlc3QgZmFpbHMsIGJ1dCB0aGUgc2VsZWN0CiAgICAgIGVsZW1lbnQgZG9lc24ndCBzZWVtIHRvIGJlIHJldmVydGVkLiBIb3dldmVyLCBpZgogICAgICB5b3UgaW5zcGVjdCB0aGUgRE9NIHlvdSdsbCBzZWUgdGhhdCB0aGUgYHNlbGVjdGVkYAogICAgICBhdHRyaWJ1dGUgaXMgcHJlc2VudCBvbiB0aGUgZXhwZWN0ZWQgYG9wdGlvbmAKICAgICAgZWxlbWVudCByYXRoZXIgdGhhbiB0aGUgb25lIHNob3duIGluIHRoZSBVSQoJLS0+CiAgICAKICAgIDxhbXAtbGlzdCBzcmM9Imh0dHBzOi8vYW1wLmRldi9kb2N1bWVudGF0aW9uL2V4YW1wbGVzL2ludGVyYWN0aXZpdHktZHluYW1pYy1jb250ZW50L3N1YnNjcmlwdGlvbl9zZXR0aW5ncy9zdWJzY3JpcHRpb24iCiAgICAgICAgICAgICAgYmluZGluZz0icmVmcmVzaCIKICAgICAgICAgICAgICBpdGVtcz0iLiIKICAgICAgICAgICAgICBzaW5nbGUtaXRlbQogICAgICAgICAgICAgIGxheW91dD0iZml4ZWQtaGVpZ2h0IgogICAgICAgICAgICAgIGhlaWdodD0iMTAiPgogICAgICA8dGVtcGxhdGUgdHlwZT0iYW1wLW11c3RhY2hlIj4KICAgICAgICA8Zm9ybSBhY3Rpb24teGhyPSJodHRwczovL2FtcC5kZXYvZG9jdW1lbnRhdGlvbi9leGFtcGxlcy9pbnRlcmFjdGl2aXR5LWR5bmFtaWMtY29udGVudC9zdWJzY3JpcHRpb25fc2V0dGluZ3Mvc3Vic2NyaXB0aW9uIgogICAgICAgICAgICAgIG1ldGhvZD0icG9zdCIKICAgICAgICAgICAgICBpZD0iZm9ybSIKICAgICAgICAgICAgICBvbj0ic3VibWl0LXN1Y2Nlc3M6CiAgICAgICAgICAgICAgICAgICAgQU1QLnNldFN0YXRlKHsgbmV4dFN1YnNjcmlwdGlvbjogbnVsbCB9KTsKICAgICAgICAgICAgCSAgc3VibWl0LWVycm9yOgogICAgICAgICAgICAgICAgICAgIEFNUC5zZXRTdGF0ZSh7CiAgICAgICAgICAgICAgICAgICAgICBjdXJyZW50U3Vic2NyaXB0aW9uOiBwcmV2aW91c1N1YnNjcmlwdGlvbiwKICAgICAgICAgICAgICAgICAgICAgIG5leHRTdWJzY3JpcHRpb246IG51bGwKICAgICAgICAgICAgICAgICAgICB9KTsiPgogICAgICAgICAgPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0ibmV4dFN1YnNjcmlwdGlvbiIgW3ZhbHVlXT0ibmV4dFN1YnNjcmlwdGlvbiI+CiAgICAgICAgICA8c2VsZWN0IG9uPSJjaGFuZ2U6CiAgICAgICAgICAgICAgICAgICAgICAgIEFNUC5zZXRTdGF0ZSh7CiAgICAgICAgICAgICAgICAgICAgICAgICAgcHJldmlvdXNTdWJzY3JpcHRpb246IGN1cnJlbnRTdWJzY3JpcHRpb24gfHwgJ3t7Y3VycmVudFN1YnNjcmlwdGlvbn19JywKICAgICAgICAgICAgICAgICAgICAgICAgICBjdXJyZW50U3Vic2NyaXB0aW9uOiBldmVudC52YWx1ZSwKICAgICAgICAgICAgICAgICAgICAgICAgICBuZXh0U3Vic2NyaXB0aW9uOiBldmVudC52YWx1ZQogICAgICAgICAgICAgICAgICAgICAgICB9KSwKICAgICAgICAgICAgICAgICAgICAgICAgZm9ybS5zdWJtaXQ7IgogICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPSIhIW5leHRTdWJzY3JpcHRpb24iPgogICAgICAgICAgICB7eyNvcHRpb25zfX0KICAgICAgICAgICAgICB7eyNpc1NlbGVjdGVkfX0KICAgICAgICAgICAgICAgIDxvcHRpb24gdmFsdWU9Int7dmFsdWV9fSIKICAgICAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT0iISFuZXh0U3Vic2NyaXB0aW9uIgogICAgICAgICAgICAgICAgICAgICAgICBzZWxlY3RlZAogICAgICAgICAgICAgICAgICAgICAgICBbc2VsZWN0ZWRdPSIoY3VycmVudFN1YnNjcmlwdGlvbiB8fCAne3tjdXJyZW50U3Vic2NyaXB0aW9ufX0nKSA9PSAne3t2YWx1ZX19JyI+CiAgICAgICAgICAgICAgICAgIHt7dGV4dH19CiAgICAgICAgICAgICAgICA8L29wdGlvbj4KICAgICAgICAgICAgICB7ey9pc1NlbGVjdGVkfX0KICAgICAgICAgICAgICB7e15pc1NlbGVjdGVkfX0KICAgICAgICAgICAgICAgIDxvcHRpb24gdmFsdWU9Int7dmFsdWV9fSIKICAgICAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT0iISFuZXh0U3Vic2NyaXB0aW9uIgogICAgICAgICAgICAgICAgICAgICAgICBbc2VsZWN0ZWRdPSIoY3VycmVudFN1YnNjcmlwdGlvbiB8fCAne3tjdXJyZW50U3Vic2NyaXB0aW9ufX0nKSA9PSAne3t2YWx1ZX19JyI+CiAgICAgICAgICAgICAgICAgIHt7dGV4dH19CiAgICAgICAgICAgICAgICA8L29wdGlvbj4KICAgICAgICAgICAgICB7ey9pc1NlbGVjdGVkfX0KICAgICAgICAgICAge3svb3B0aW9uc319CiAgICAgICAgICA8L3NlbGVjdD4KICAgICAgICA8L2Zvcm0+CiAgICAgIDwvdGVtcGxhdGU+CiAgICA8L2FtcC1saXN0Pgo8L2JvZHk+PC9odG1sPg==) shows the problem. I've included step-by-step instructions in a comment in the playground.

## What browsers are affected?

I've tested on Chrome on MacOS.

## Which AMP version is affected?

It's possibly always been broken, but the version printed in my console is 2103122145004.

cc: @caroqliu

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.