fix(bootstrap): allow-clear style

Author: dimirc

src/bootstrap/match.tpl.html

@@ -1,9 +1,15 @@
 <div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
-  <button aria-label="{{ $select.baseTitle }} activate" type="button" class="btn btn-default form-control ui-select-toggle" tabindex="-1" ;="" ng-disabled="$select.disabled" ng-click="$select.activate()">
+  <button type="button" tabindex="-1"
+      class="btn btn-default form-control ui-select-toggle"
+      aria-label="{{ $select.baseTitle }} activate"
+      ng-disabled="$select.disabled" 
+      ng-click="$select.activate()">
     <span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted">{{$select.placeholder}}</span>
     <span ng-hide="$select.isEmpty()" class="ui-select-match-text" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""></span>
     <i class="caret pull-right" ng-click="$select.toggle($event)"></i>
-  <button aria-label="{{ $select.baseTitle }} clear" type="button" class="ui-select-clear" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
-    <i class="glyphicon glyphicon-remove"></i>
+    <a ng-show="$select.allowClear && !$select.isEmpty()" aria-label="{{ $select.baseTitle }} clear" style="margin-right: 10px" 
+      ng-click="$select.clear($event)" class="btn btn-xs pull-right">
+      <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
+    </a>
   </button>
 </div>

src/select.js

@@ -466,6 +466,12 @@
       }
     };
 
+    ctrl.clear = function($event) {
+      ctrl.select(undefined);
+      $event.stopPropagation();
+      ctrl.focusser[0].focus();
+    };
+
     // Toggle dropdown
     ctrl.toggle = function(e) {
       if (ctrl.open) {

src/select2/match.tpl.html

@@ -8,6 +8,6 @@
    ng-click="$select.activate()" aria-label="{{ $select.baseTitle }} select">
   <span ng-show="$select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
-  <abbr ng-if="$select.allowClear && !$select.isEmpty()" class="select2-search-choice-close" ng-click="$select.select(undefined)"></abbr>
+  <abbr ng-if="$select.allowClear && !$select.isEmpty()" class="select2-search-choice-close" ng-click="$select.clear($event)"></abbr>
   <span class="select2-arrow ui-select-toggle" ng-click="$select.toggle($event)"><b></b></span>
 </a>