dynamic_form_double_select_options_change.html

<!-- A page that is used to test that a dynamic form fill feature works properly when select options are added/removed. -->
<body>
  <form name="addr1.1" id="form1" action="https://example.com/" method="post">
    Name: <input type="text" name="firstname" id="firstname" autocomplete="given-name"><br>
    Address: <input type="text" name="address1" id="address1"><br>
    City: <input type="text" name="city" id="city"><br>
    State: <select name="state" id="state">
      <option value="ON">ON</option>
      <option value="QC">QC</option>
      <option value="AB">AB</option>
    </select> <br>
    Zip: <input name="zip" id="zip"> <br>
    Country: <select name="country" id="country" onchange="CountryChanged()">
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select> <br>
    Company: <input name="company" id="company"> <br>
    Email: <input name="email" id="email"> <br>
    Phone: <input name="phone" id="phone"> <br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submit" id="profile_submit">
  </form>
</body>

<script>
// The initial fill is triggered on "firstname".
//
// Upon that fill, reset the "firstname" and "address1" fields and replace
// the "state" options. This causes a refill.
//
// Upon the refill, reset the "firstname" field. This does not cause a refill
// because the "firstname" field has been autofilled before.
function CountryChanged() {
  // This happens upon the initial fill.
  document.getElementById("firstname").value = '';
  document.getElementById("address1").value = '';
  const state_select = document.getElementById("state");
  for (let i=0; i<state_select.length; i++) {
     state_select.remove(i);
  }
  state_select.options[0] = new Option('WA', 'WA');
  state_select.options[1] = new Option('MA', 'MA');
  state_select.options[2] = new Option('TX', 'TX');

  document.getElementById("firstname").addEventListener('change', function() {
    // This happens upon the refill.
    document.getElementById("firstname").value = '';

    // Note that 'TX' was an option before already.
    // This must happen after the refill has finished because this 'change'
    // handler is executed before the "state" field is refilled. That is,
    // the refill would select 'TX'.
    setTimeout(function() {
      for (let i=0; i<state_select.length; i++) {
         state_select.remove(i);
      }
      state_select.options[0] = new Option('CA', 'CA');
      state_select.options[1] = new Option('MA', 'MA');
      state_select.options[2] = new Option('TX', 'TX');
    });

    window['refill2'] = true;
    console.log('An event happened that should not trigger a second refill.');
  });

  window['refill1'] = true;
  console.log('An event happened that should trigger a refill.');
}
</script>
chromium/chrome/test/data/autofill/dynamic_form_double_select_options_change.html
