title: Issue with hidden fields not autofilling correctly in Chrome
body: <p>My dropdown fields use a hidden dropdown field that updates a text input. The reason is because I use a field for 'state' and when a country other than the United States is selected, it turns into the text field that is being updated. There is also a presentation interactive dropdown menu that is separate from the native menu, that uses react to update the hidden dropdown, and the text field. This is all handled using one state through react.</p>
  
  <p>The structure looks like this...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;input type="hidden" name="state" autocomplete="shipping address-level1"&gt;
    &lt;div class="dropdown"&gt;
      &lt;i class="icon icon-drop-down" role="presentation"&gt;&lt;/i&gt;
        ::before &lt;!-- presentation of dropdown that sets the hidden dropdown --&gt;
    &lt;/div&gt;
    &lt;select class="hidden"&gt;
      &lt;option value="AL"&gt;Alabama&lt;/option&gt;
      &lt;option value="AK"&gt;Alaska&lt;/option&gt;
      &lt;option value="AS"&gt;American Samoa&lt;/option&gt;
      &lt;!-- ... --&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Recently Chrome's autofill would not update the hidden select menu. Is this an issue with chrome? Has anyone else experienced this issue? Poking around I've found <code>display: none</code> and <code>visibility: hidden</code> cause the issue, but making the item visible will enable Chrome's autofill for the dropdown.</p>
  
  <p>Any info would be greatly appreciated! Thanks!</p>