Firefox select dropdown keeps refreshing/reverting to default option due to running Javascript - AngularJS

问题

I'm building an app in AngularJS and am having trouble with select dropdown menus when using Firefox.

When I click a select menu and hover over the options, it resets the selected option, from the one my cursor is hovering over, to the default/first option. When the number of options is large, it becomes very difficult to select the correct option.

The app requires JavaScript to update the screen every second, and this seems to be the cause.

However, I don't seem to have this problem with Chrome or Safari.

Is there a way to resolve this for Firefox?

Demo here.

index.html

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ctrl">
    <div ng-init="updatetimer()">
    <div>seconds: {{counter}}</div>
    <select ng-model="something" ng-options="n.name for n in namelist">
      <option value="">select person</option>    
    </select>
    </div>
  </body>
</html>

script.js

var app = angular.module('myapp', []);

var ctrl = ['$scope', '$timeout', function($scope, $timeout) {

    $scope.counter=0;

    $scope.namelist = [
      {name: "Name1"}, {name: "Name2"}, {name: "Name3"}, {name: "Name4"}, {name: "Name5"},
      {name: "Name6"}, {name: "Name7"}, {name: "Name8"}, {name: "Name9"}, {name: "Name10"},
      {name: "Name11"}, {name: "Name12"}, {name: "Name13"}, {name: "Name14"},
      {name: "Name15"}, {name: "Name16"}, {name: "Name17"}, {name: "Name18"},
      {name: "Name19"}, {name: "Name20"}, {name: "Name21"}, {name: "Name22"},
      {name: "Name23"}, {name: "Name24"}, {name: "Name25"}, {name: "Name26"},
      {name: "Name27"}, {name: "Name28"}, {name: "Name29"}, {name: "Name30"}
   ];

  $scope.updatetimer = function() {

    var updater = function() {
      $scope.counter++;
      $timeout(updater, 1000);
    }
    updater();
  };

}];

回答1:

It seems like the creating the 'option' elements through ng-options is the root cause to this issue.

I've altered the code a bit to make sure if that's the problem

See the plunkr

http://plnkr.co/edit/DLf2wvVGXRiwci6FhqQO?p=preview

What I've done is to move the creation logic of the options to ng-repeat. That'll fix the issue for now.

回答2:

Please update the angularjs to v1.2.15

http://plnkr.co/edit/pTnzpKAwFjugRVpuprFF?p=preview

回答3:

Some people will still face this problem.

Here is the fix:

 if (existingOption.id !== option.id) {
    lastElement.val(existingOption.id = option.id);
 }
-if (existingOption.element.selected !== option.selected) {
+if (existingOption.selected !== option.selected) {
      lastElement.prop('selected', (existingOption.selected = option.selected));
 }
} else {

Add this patch directly into the angular core. This bug still persists in v1.2.8

回答4:

That's a AngularJS older version issue basically prior to 1.0.7, it's been fixed in 1.0.7 version, if you using anything older than 1.0.7 then you will be getting the same issue.

来源：https://stackoverflow.com/questions/17498123/firefox-select-dropdown-keeps-refreshing-reverting-to-default-option-due-to-runn

标签

javascript

firefox

angularjs

selection

option