Firefox select dropdown keeps refreshing/reverting to default option due to running Javascript - AngularJS
Question
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?
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();
};
}];
4 answers
solution1
3 2014-01-23 06:56:37
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.
solution2
3 2014-03-24 17:58:19
Please update the angularjs to v1.2.15
solution3
2 2014-07-03 06:55:05
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
solution4
0 2014-08-13 11:20:48
这是一个基本上在1.0.7之前的AngularJS旧版本问题，它已在1.0.7版本中修复，如果你使用的是1.0.7之前的任何版本，那么你将遇到同样的问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.