Amphtml: Whitelist <optgroup> Tags In AMP-Form

Created on 12 Aug 2016 · 4Comments · Source: ampproject/amphtml

The <optgroup> HTML tag should be whitelisted in AMP-Form support. It has been part of the HTML spec since 4.01 and caniuse confirms that it is among the HTML tags which have universal support among both desktop and mobile browsers.

This URL http://www.fletc3her.com/optgroup.html reproduces the issue and full code is reproduced below. The following code should be a valid form with the extended component AMP-Form loaded in the header, but instead it reports an error "The tag 'optgroup' is disallowed".

    <form action="https://www.fletc3her.com/optgroup.html" method="post" target="_blank">
        <select name="test">
            <optgroup label="One">
                <option value="two">Two</option>
                <option value="three">Three</option>
            </optgroup>
            <optgroup label="Four">
                <option value="five">Five</option>
                <option value="six">Six</option>
            </optgroup>
        </select>
    </form>

Affects all browsers

Tested on AMP version 1470343175507

Should affect all version of AMP since the optgroup tag was not whitelisted in the initial implementation.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Optgroup Bug</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  </head>
  <body>
    <h1>Optgroup Bug</h1>
    <p>This page should validate as AMP, but the validator is flagging &lt;optgroup&gt; as an invalid tag.
    <form action="https://www.fletc3her.com/optgroup.html" method="post" target="_blank">
        <select name="test">
            <optgroup label="One">
                <option value="two">Two</option>
                <option value="three">Three</option>
            </optgroup>
            <optgroup label="Four">
                <option value="five">Five</option>
                <option value="six">Six</option>
            </optgroup>
        </select>
    </form>
  </body>
</html>

DiscussioQuestion caching

Source