Amphtml: Dynamic <amp-list> with <option><select> with required validation fails in IE11 due to amp-mustache braces being ignored

[RonnieWinter]

What's the issue?

Please refer to this CodePen

The way this snippet works is that when the user leaves 0 children and submits, the form should submit successfully. If he/she however chooses > 0 children number, then the validation fill fail if not setting any of the ages.

Now on Internet Explorer 11, there is a problem in where if a user selects 0 children and presses on the search button the validation will fail (this is incorrect), as it is ignoring the {{#.}} amp-mustache declarative and still sees the required attribute in the select.

Moreover, if you were to set 4 children, and select each age to some value other than '?', when you press the search button, the form will fail to submit.

This is an issue that affects IE11 validation. Since IE11 is so crappy, most playgrounds do not work with IE11, so in order to run it, please copy the html into a file and run it locally in IE11.

[aghassemi]

/to @cvializ

[cvializ]

Thanks for reporting! I can reproduce this behavior, and this is definitely a bug. I'll prioritize it to be worked on soon

[cvializ]

@jridgewell have we already considered adding a template polyfill to IE11 to make sure that strange behavior like this does not occur?

[jridgewell]

You can't polyfill <template> properly, but we've done the best we can. I think https://github.com/ampproject/amphtml/pull/19346 would fix this.

[aghassemi]

Closing as per https://github.com/ampproject/amphtml/pull/19346 <script type="text/plain" template="amp-mustache"> can be used instead of <template> to get around the issue.