Handle disabled attribute with Selectize theme

Author: tkrotoff

examples/selectize-bootstrap3.html

@@ -102,6 +102,21 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">Disabled</label>
+        <div class="col-sm-6">
+
+          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true">
+            <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
+            <choices repeat="item in people | filter: $select.search">
+              <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
+              <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
+            </choices>
+          </ui-select>
+
+        </div>
+      </div>
+
     </fieldset>
   </form>
 

src/select.js

@@ -44,11 +44,13 @@ angular.module('ui.select', [])
       ctrl.open = false;
 
       ctrl.activate = function() {
-        ctrl.open = true;
-        // Give it time to appear before focus
-        setTimeout(function() {
-          ctrl.input[0].focus();
-        });
+        if (ctrl.disabled === false) {
+          ctrl.open = true;
+          // Give it time to appear before focus
+          setTimeout(function() {
+            ctrl.input[0].focus();
+          });
+        }
       };
 
       ctrl.select = function(item) {

src/select2/select.tpl.html

@@ -1,8 +1,8 @@
 <div class="select2 select2-container"
-     ng-class="{'select2-container-active select2-dropdown-open': $select.open && !$select.disabled,
+     ng-class="{'select2-container-active select2-dropdown-open': $select.open,
                 'select2-container-disabled': $select.disabled}">
   <div class="ui-select-match"></div>
-  <div ng-class="{'select2-display-none': !$select.open || $select.disabled}"
+  <div ng-class="{'select2-display-none': !$select.open}"
        class="select2-drop select2-with-searchbox select2-drop-active">
     <div class="select2-search">
       <input type="text"

src/selectize/select.tpl.html

@@ -1,11 +1,14 @@
 <div class="selectize-control single">
   <div class="selectize-input"
-       ng-class="{'focus': $select.open}"
+       ng-class="{'focus': $select.open, 'disabled': $select.disabled}"
        ng-click="$select.activate()">
     <div class="ui-select-match"></div>
-    <input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{$select.placeholder}}"
+    <input type="text" autocomplete="off" tabindex=""
+           class="ui-select-search"
+           placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
-           ng-hide="$select.selected && !$select.open">
+           ng-hide="$select.selected && !$select.open"
+           ng-disabled="$select.disabled">
   </div>
   <div class="ui-select-choices"></div>
 </div>