Skip to content

Commit f0908da

Browse files
dimircdimirc
committed
Merge pull request angular-ui#728 from angular-ui/feat-setfocus
feat(focus): allow to set focus when loaded or listening a scope event
2 parents 85b560a + b8f8306 commit f0908da

File tree

3 files changed

+135
-3
lines changed

3 files changed

+135
-3
lines changed

‎examples/demo-focus.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
</style>
56+
</head>
57+
58+
<body ng-controller="DemoCtrl">
59+
60+
<h3>Feature: Focus</h3>
61+
<hr>
62+
63+
<p>Regular uiSelect</p>
64+
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
65+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
66+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
67+
<div ng-bind-html="person.name | highlight: $select.search"></div>
68+
<small>
69+
email: {{person.email}}
70+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
71+
</small>
72+
</ui-select-choices>
73+
</ui-select>
74+
75+
<br>
76+
<br>
77+
<br>
78+
79+
<p>Using <b>uisAutofocus</b> to automatically get focus when loaded</p>
80+
<ui-select autofocus ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
81+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
82+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
83+
<div ng-bind-html="person.name | highlight: $select.search"></div>
84+
<small>
85+
email: {{person.email}}
86+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
87+
</small>
88+
</ui-select-choices>
89+
</ui-select>
90+
91+
<br>
92+
<br>
93+
<br>
94+
95+
<p>Using <b>uisFocusOn</b> defining a scope event name to listen</p>
96+
<ui-select focus-on='UiSelectDemo1' ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
97+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
98+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
99+
<div ng-bind-html="person.name | highlight: $select.search"></div>
100+
<small>
101+
email: {{person.email}}
102+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
103+
</small>
104+
</ui-select-choices>
105+
</ui-select>
106+
107+
<br>
108+
<br>
109+
<button class='btn' ng-click="setInputFocus()">Set Focus</button>
110+
111+
</body>
112+
</html>

‎src/uiSelectController.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,11 @@ uis.controller('uiSelectCtrl',
309309
}
310310
};
311311

312+
ctrl.setFocus = function(){
313+
if (!ctrl.focus && !ctrl.multiple) ctrl.focusser[0].focus();
314+
if (!ctrl.focus && ctrl.multiple) _searchInput[0].focus();
315+
};
316+
312317
ctrl.clear = function($event) {
313318
ctrl.select(undefined);
314319
$event.stopPropagation();

‎src/uiSelectDirective.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
uis.directive('uiSelect',
2-
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse',
3-
function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse) {
2+
['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile', '$parse', '$timeout',
3+
function($document, uiSelectConfig, uiSelectMinErr, $compile, $parse, $timeout) {
44

55
return {
66
restrict: 'EA',
@@ -15,7 +15,6 @@ uis.directive('uiSelect',
1515

1616
controller: 'uiSelectCtrl',
1717
controllerAs: '$select',
18-
1918
link: function(scope, element, attrs, ctrls, transcludeFn) {
2019
var $select = ctrls[0];
2120
var ngModel = ctrls[1];
@@ -257,6 +256,22 @@ uis.directive('uiSelect',
257256
}
258257
});
259258

259+
//Automatically gets focus when loaded
260+
if (angular.isDefined(attrs.autofocus)){
261+
$timeout(function(){
262+
$select.setFocus();
263+
});
264+
}
265+
266+
//Gets focus based on scope event name (e.g. focus-on='SomeEventName')
267+
if (angular.isDefined(attrs.focusOn)){
268+
scope.$on(attrs.focusOn, function() {
269+
$timeout(function(){
270+
$select.setFocus();
271+
});
272+
});
273+
}
274+
260275
if ($select.multiple){
261276
scope.$watchCollection(function(){ return ngModel.$modelValue; }, function(newValue, oldValue) {
262277
if (oldValue != newValue)

0 commit comments

Comments
 (0)