-
.selectize-input > input {
width: 100%;
@@ -22,6 +40,18 @@
/* Bootstrap theme */
+/* Helper class to show styles when focus */
+.btn-default-focus {
+ color: #333;
+ background-color: #EBEBEB;
+ border-color: #ADADAD;
+ text-decoration: none;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+
/* Fix Bootstrap dropdown position when inside a input-group */
.input-group > .ui-select-bootstrap.dropdown {
/* Instead of relative */
diff --git a/src/select.js b/src/select.js
index 8936798ee..e21ec15bf 100644
--- a/src/select.js
+++ b/src/select.js
@@ -116,6 +116,8 @@ angular.module('ui.select', [])
ctrl.items = [];
ctrl.selected = undefined;
ctrl.open = false;
+ ctrl.focus = false;
+ ctrl.focusser = undefined; //Reference to input element used to handle focus events
ctrl.disabled = undefined; // Initialized inside uiSelect directive link function
ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
@@ -137,13 +139,14 @@ angular.module('ui.select', [])
}
// When the user clicks on ui-select, displays the dropdown list
- ctrl.activate = function() {
+ ctrl.activate = function(initSearchValue) {
if (!ctrl.disabled) {
_resetSearchInput();
ctrl.open = true;
// Give it time to appear before focus
$timeout(function() {
+ ctrl.search = initSearchValue || ctrl.search;
_searchInput[0].focus();
});
}
@@ -206,6 +209,7 @@ angular.module('ui.select', [])
if (ctrl.open) {
_resetSearchInput();
ctrl.open = false;
+ ctrl.focusser[0].focus();
}
};
@@ -288,8 +292,8 @@ angular.module('ui.select', [])
}])
.directive('uiSelect',
- ['$document', 'uiSelectConfig', 'uiSelectMinErr',
- function($document, uiSelectConfig, uiSelectMinErr) {
+ ['$document', 'uiSelectConfig', 'uiSelectMinErr', '$compile',
+ function($document, uiSelectConfig, uiSelectMinErr, $compile) {
return {
restrict: 'EA',
@@ -309,6 +313,98 @@ angular.module('ui.select', [])
var $select = ctrls[0];
var ngModel = ctrls[1];
+ //Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954
+ var focusser = angular.element("
");
+ $compile(focusser)(scope);
+ $select.focusser = focusser;
+
+ element.append(focusser);
+ focusser.bind("focus", function(){
+ scope.$evalAsync(function(){
+ $select.focus = true;
+ });
+ });
+ focusser.bind("blur", function(){
+ scope.$evalAsync(function(){
+ $select.focus = false;
+ });
+ });
+ focusser.bind("keydown", function(e){
+
+ if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
+ return;
+ }
+
+ if (e.which == KEY.DOWN || e.which == KEY.UP || e.which == KEY.ENTER || e.which == KEY.SPACE){
+ e.preventDefault();
+ e.stopPropagation();
+ $select.activate();
+ }
+
+ scope.$digest();
+ });
+
+ focusser.bind("keyup input", function(e){
+
+ if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC || e.which == KEY.ENTER) {
+ return;
+ }
+
+ $select.activate(focusser.val()); //User pressed some regualar key, so we pass it to the search input
+ focusser.val('');
+ scope.$digest();
+
+ });
+
+ //TODO Refactor to reuse the KEY object from uiSelectCtrl
+ var KEY = {
+ TAB: 9,
+ ENTER: 13,
+ ESC: 27,
+ SPACE: 32,
+ LEFT: 37,
+ UP: 38,
+ RIGHT: 39,
+ DOWN: 40,
+ SHIFT: 16,
+ CTRL: 17,
+ ALT: 18,
+ PAGE_UP: 33,
+ PAGE_DOWN: 34,
+ HOME: 36,
+ END: 35,
+ BACKSPACE: 8,
+ DELETE: 46,
+ isArrow: function (k) {
+ k = k.which ? k.which : k;
+ switch (k) {
+ case KEY.LEFT:
+ case KEY.RIGHT:
+ case KEY.UP:
+ case KEY.DOWN:
+ return true;
+ }
+ return false;
+ },
+ isControl: function (e) {
+ var k = e.which;
+ switch (k) {
+ case KEY.SHIFT:
+ case KEY.CTRL:
+ case KEY.ALT:
+ return true;
+ }
+
+ if (e.metaKey) return true;
+
+ return false;
+ },
+ isFunctionKey: function (k) {
+ k = k.which ? k.which : k;
+ return k >= 112 && k <= 123;
+ }
+ };
+
attrs.$observe('disabled', function() {
// No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
$select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
index 8dd1fef61..356255150 100644
--- a/src/select2/select.tpl.html
+++ b/src/select2/select.tpl.html
@@ -1,6 +1,7 @@
+ 'select2-container-disabled': $select.disabled,
+ 'select2-container-active': $select.focus }">
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html
index 8fcc02336..bc2436087 100644
--- a/src/selectize/select.tpl.html
+++ b/src/selectize/select.tpl.html
@@ -1,9 +1,9 @@