0

I've come across a strange issue that I am seeing in Chrome Version 39.0.2171.95 (64-bit) on a Mac using Angular version 1.2.20. When the page first loads, if I tab through a form and change the values of a select list, the select list's model value does not update. Here's a plnkr showing the issue:

http://plnkr.co/edit/0DFI7w9mcp76kSA3lmwE?p=preview

Follow these steps to replicate:

  1. Click in the first text field and type any value.
  2. Press Tab
  3. Type the letter "v" so the select changes to "Vermont".
  4. Type the letter "v" again, so the select changes to "Virginia".
  5. Press Tab to enter the next text field.

Notice how the output of data.state is still set to "Vermont", even though the select list is set to "Virginia. Why is this happening and is there any way to fix it?

Here is the HTML from the plnkr:

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form name="myForm" ng-init="states = ['Alabama', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']">
      <input type="text" ng-model="data.text1">
      <select ng-model="data.state" ng-options="value for value in states track by value"></select>
      <input type="text" ng-model="data.text2">
    </form>
    <div>data.text1 = {{ data.text1 }}</div>
    <div>data.state = {{ data.state }}</div>
    <div>data.text2 = {{ data.text2 }}</div>
  </body>

</html>
||||||
  • When the page loads, if I repeat steps 3 and 4 twice before pressing Tab, meaning, hit "v" four times, then the select list correctly changes to "Virginia". I'm very confused as to what is happening here. – flyingL123 Dec 12 '14 at 15:52
1

Looks like this is a bug in Angular itself (see https://github.com/angular/angular.js/issues/9134). You can work around it by adding a default/null option to the select (http://plnkr.co/edit/v6XFiQ?p=preview)

<select ...>
  <option value="">Pick a state...</option>
</select>
||||||
  • Thank you so much! Just curious, how did you determine that adding a default option would fix the problem based on the contents of that github issue? I read through the issue but don't think I would have come to the same conclusion of how to fix it. – flyingL123 Dec 12 '14 at 16:39
  • There were a couple of other issues linked where I saw the solution; that just seemed to be the main one. – rayners Dec 12 '14 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.