I am currently developing an AngularJS app and encountering issues with select dropdown menus specifically in Firefox.
Whenever I click on a select menu and hover over the options, it automatically resets the selected option back to the default/first option instead of the one my cursor is on. This problem becomes more challenging when dealing with a large number of options as it makes it hard to choose the correct one.
It seems that this issue arises due to the requirement of JavaScript to update the screen every second in the app.
Interestingly, I do not face this problem when using Chrome or Safari browsers.
Is there a solution available to fix this behavior in Firefox?
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcddd2dbc9d0ddce92d6cffc8d928c928b">[email protected]</a>" 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();
};
}];