Menu
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="[email protected]" 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();
};
}];
432
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
