From 21d25165ffa0883f73817ce707e2827243e9d6fd Mon Sep 17 00:00:00 2001
From: Wladimir Coka <wlacoka@gmail.com>
Date: Sun, 29 Jun 2014 21:27:15 -0500
Subject: [PATCH 1/2] feat(focusable): allow control to be get focus. Support
 for tab navigation

---
 src/bootstrap/match.tpl.html  |   3 +-
 src/bootstrap/select.tpl.html |   2 +-
 src/select.css                |  30 ++++++++++
 src/select.js                 | 100 +++++++++++++++++++++++++++++++++-
 src/select2/select.tpl.html   |   3 +-
 src/selectize/select.tpl.html |   4 +-
 6 files changed, 134 insertions(+), 8 deletions(-)

diff --git a/src/bootstrap/match.tpl.html b/src/bootstrap/match.tpl.html
index 0610017ae..8e8080e9b 100644
--- a/src/bootstrap/match.tpl.html
+++ b/src/bootstrap/match.tpl.html
@@ -1,6 +1,7 @@
-<button type="button" class="btn btn-default form-control ui-select-match"
+<button type="button" class="btn btn-default form-control ui-select-match" tabindex="-1"
         ng-hide="$select.open"
         ng-disabled="$select.disabled"
+        ng-class="{'btn-default-focus':$select.focus}";
         ng-click="$select.activate()">
   <span ng-hide="$select.selected !== undefined" class="text-muted">{{$select.placeholder}}</span>
   <span ng-show="$select.selected !== undefined" ng-transclude></span>
diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
index 952b41a89..a8681c9b3 100644
--- a/src/bootstrap/select.tpl.html
+++ b/src/bootstrap/select.tpl.html
@@ -1,6 +1,6 @@
 <div class="ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
-  <input type="text" autocomplete="off" tabindex=""
+  <input type="text" autocomplete="off" tabindex="-1"
          class="form-control ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
diff --git a/src/select.css b/src/select.css
index d6b36f6be..b3c7c636c 100644
--- a/src/select.css
+++ b/src/select.css
@@ -3,12 +3,30 @@
   font-weight: bold;
 }
 
+.ui-select-offscreen {
+  clip: rect(0 0 0 0) !important;
+  width: 1px !important;
+  height: 1px !important;
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  outline: 0 !important;
+  left: 0px !important;
+  top: 0px !important;
+}
 
 /* Select2 theme */
 
 
 /* Selectize theme */
 
+/* Helper class to show styles when focus */
+.selectize-input.selectize-focus{
+  border-color: #007FBB !important;
+}
+
 /* Fix input width for Selectize theme */
 .selectize-control > .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..43de379ea 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,96 @@ 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("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />");
+      $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){
+          $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 @@
 <div class="select2 select2-container"
      ng-class="{'select2-container-active select2-dropdown-open': $select.open,
-                'select2-container-disabled': $select.disabled}">
+                'select2-container-disabled': $select.disabled,
+                'select2-container-active': $select.focus }">
   <div class="ui-select-match"></div>
   <div class="select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
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 @@
 <div class="selectize-control single">
   <div class="selectize-input"
-       ng-class="{'focus': $select.open, 'disabled': $select.disabled}"
+       ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}"
        ng-click="$select.activate()">
     <div class="ui-select-match"></div>
-    <input type="text" autocomplete="off" tabindex=""
+    <input type="text" autocomplete="off" tabindex="-1"
            class="ui-select-search"
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"

From 0b2cbf99f08617338a7c1eab5e98bfb32d2ae6e4 Mon Sep 17 00:00:00 2001
From: Wladimir Coka <wlacoka@gmail.com>
Date: Wed, 2 Jul 2014 21:08:42 -0500
Subject: [PATCH 2/2] feat(focusable): open dropdown with space key

---
 src/select.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/select.js b/src/select.js
index 43de379ea..e21ec15bf 100644
--- a/src/select.js
+++ b/src/select.js
@@ -335,7 +335,9 @@ angular.module('ui.select', [])
           return;
         }
 
-        if (e.which == KEY.DOWN  || e.which == KEY.UP || e.which == KEY.ENTER){
+        if (e.which == KEY.DOWN  || e.which == KEY.UP || e.which == KEY.ENTER || e.which == KEY.SPACE){
+          e.preventDefault();
+          e.stopPropagation();
           $select.activate();
         }