fix(bootstrap): change match element to prevent clicking conflict with allow-clear

Author: dimirc

src/bootstrap/match.tpl.html

@@ -1,15 +1,16 @@
 <div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
-  <button type="button" tabindex="-1"
+  <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()">
+      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 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>
     <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>
-  </button>
+  </span>
 </div>

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();
   }