Merge pull request #667 from angular-ui/fix-allow-clear-bs

fix(bootstrap): allow-clear style

Author: dimirc

src/bootstrap/match.tpl.html

@@ -1,9 +1,16 @@
 <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()">
+  <span tabindex="-1"
+      class="btn btn-default form-control ui-select-toggle"
+      aria-label="{{ $select.baseTitle }} activate"
+      ng-disabled="$select.disabled" 
+      ng-click="$select.activate()"
+      style="outline: 0;">
     <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>
+    <span ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left" 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>
-  </button>
+    <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 btn-link pull-right">
+      <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
+    </a>
+  </span>
 </div>

src/select.js

@@ -467,6 +467,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>

test/select.spec.js

@@ -85,7 +85,7 @@ describe('ui-select tests', function() {
   }
 
   function getMatchLabel(el) {
-    return $(el).find('.ui-select-match > button:first > span[ng-transclude]:not(.ng-hide)').text();
+    return $(el).find('.ui-select-match > span:first > span[ng-transclude]:not(.ng-hide)').text();
   }
 
   function clickItem(el, text) {
@@ -99,7 +99,7 @@ describe('ui-select tests', function() {
   }
 
   function clickMatch(el) {
-    $(el).find('.ui-select-match > button:first').click();
+    $(el).find('.ui-select-match > span:first').click();
     scope.$digest();
   }