Can't remove items from multiselect if bootstrap theme used

[iyeldinov]

On cross sign click it only selects item

[danpeter]

I have the same problem. Works in Chrome but not IE 11 or Firefox 32.0.3.

[iyeldinov]

Confirm
Works in:

• Chrome 37.0.2062.122
• Safari 7.0.6

Not working in:

• Firefox 32.0.2
• IE 11

[Eviradnus]

Exact same issue, with the bootstrap theme only (select2 is fine).
Does not work in IceWeasel 31.0 / does work in Chromium 35.0.1916.153.

[SaggezzaScott]

Yeah the bootstrap theme is causing me some grief as well. Apparently the elements it creates in the input field are buttons in bootstrap, whereas they are list items in select2. The fact they are buttons without a type is really aggravating since it submits my form. I don't want to directly edit the ui-select code in case of updates but I can't add type="button" without doing so. To top it off, the close icon is a child of the button, so I can't even use CSS to make it cover the whole button.

Edit: Current solution to this problem is to add the following to the controller:
$scope.$watch('ng-model of the ui-select', function() {
$('.ui-select-match-item').attr('type', 'button');
});

[pderksen]

Part of my PR for another issue might help with this.

https://github.com/pderksen/ui-select/commit/a6cb30904ac3cc97da39b079aa360f7d7d2a7716

[smajl]

a tags for removing choices with href attribute set to #... nope, nope, nope...

[careywalker]

I am having this issue in IE9 and came up with the following solution using bootstrap button groups to group the two buttons for the selected items.

Button #1: Contains the text of the selected item
Button #2: Contains the glyphicon-remove icon (which I think looks nicer than the X letter)

Visually this looks fine but I would like other people's opinion on this...

I have tested this in the following browsers:

IE9
Chrome: 37.0.2062.124
FF: 30.0

$templateCache.put("bootstrap/match-multiple.tpl.html", "<span class=\"ui-select-match\"><span ng-    repeat=\"$item in $select.selected\"><span class=\"input-group\"><span class=\"input-group-btn\">    <button style=\"border-right:0px;\" class=\"ui-select-match-item btn btn-default btn-xs\" tabindex=\"-1\" ng-    disabled=\"$select.disabled\" ng-click=\"$select.activeMatchIndex = $index;\" ng-class=\"{\'btn-    primary\':$select.activeMatchIndex === $index}\"><span uis-transclude-append=\"\"></span></button>    <button  ng-hide=\"$select.disabled\" ng-click=\"$select.removeChoice($index)\" style=\"margin-right:     3px;border-left:0px;\" type=\"button\" class=\"ui-select-match-item btn btn-default btn-xs\"><span     class=\"glyphicon glyphicon-remove\"></span></button></span></span></span></span>");

[dimirc]

Fixed at v0.8.1
Check updated demo