var app = angular.module('plunker', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
var self = this;
self.states = loadAll();
self.querySearch = querySearch;
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states;
return results;
}
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, 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';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p>When going down the list items with the keyboard, the viewport and scroll bar don't keep up with the focused item</p>
<md-content layout-padding layout="column">
<form ng-submit="$event.preventDefault()">
<md-autocomplete
md-selected-item="ctrl.selectedItem"
md-search-text="ctrl.searchText"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.display"
md-min-length="0"
placeholder="What is your favorite US state?">
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-autocomplete>
</form>
</md-content>
<p>Something similar happens with md-select using firefox </p>
<md-select placeholder="Pick" ng-model="someVal">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</body>
</html>
/* Put your css in here */