Add Allow-Clear support to Bootstrap Template

[DanielClausen]

Bootstrap theme support for allow-clear attribute.

[amcdnl]

Merged

[cisco90]

I'm using 0.9.3 with this snippet:

<ui-select id="select-category" ng-model="categories.selected" theme="bootstrap" ng-disabled="disabled" ng-change="filterItemFromCategory()" allow-clear >

what I'm missing?

[amcdnl]

Your using it on the wrong directive, https://github.com/angular-ui/ui-select/wiki/ui-select-match

[bampakoa]

Hi,

I am using it as

<ui-select-match allow-clear>{{$select.selected.description}}</ui-select-match>

but there is no difference.

[amcdnl]

allow-clear=true work?

[bampakoa]

Neither of both ways worked

<ui-select-match allow-clear='true'>{{$select.selected.description}}</ui-select-match>
<ui-select-match allow-clear=true>{{$select.selected.description}}</ui-select-match>

[DanielClausen]

Here is a working demo on plunker:
http://plnkr.co/edit/mrCIclDenv1VnFw0MlJ6?p=preview

[bampakoa]

I saw in the working demo that you are using version 0.9.4. Is it also working for 0.9.3?

[brianfeister]

I'm considering reverting this - I have the same question - why are we using bootstrap columns in a btn-group? Also, the Plunkr posted above (http://plnkr.co/edit/mrCIclDenv1VnFw0MlJ6?p=preview), "sort of" works. If you focus the input field the post-focus width does not match the pre-focus width.

[brianfeister]

@DanielClausen given this is your code, can you comment?

[DanielClausen]

I needed to make this a button group to handle the addition of the clear button. But making it a button group added a lot of weirdness with widths and wrapping. Adding the columns fixed all that weirdness for me and I am using it in about three different sizes. I'm totally open if someone has any better ideas on how to handle this.

[brianfeister]

Honestly - I'm open to suggestions as well, but I would consider simply removing the functionality, since our solution doesn't seem to be working for alot of people. It's best for users to be forced to roll their own CSS for clearing since they can put anything they choose in their custom directive content. That way we aren't enforcing UI opinions (and bugs in this case) in the base library.

[bampakoa]

A workaround is to add the following in the ui-select-match directive

<a style="margin-right: 10px" ng-click="resetValue($event)" class="btn btn-xs pull-right"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>

and then in the controller:

$scope.resetValue = function($event){
      $scope.selected = null;
      $event.stopPropagation();
}

[howieweiner]

@bampakoa's suggestion works well, but in my case, it's not practical to add multiple methods to multiple controllers, so I wrote a child directive. Suits my purpose.

I'm wondering if this might not be a cleaner solution than attempting to rework the ui-select-match directive - considering the introduction of bootstrap columns caused so many issues?

Here's my directive: https://gist.github.com/howieweiner/f9db8d386a507defad2b

[abobwhite]

This works, but the styling is royally jacked up. See issue #578.

[dimirc]

Based on @bampakoa comment I pushed PR #667

Demo plunker

[howieweiner]

Unfortunately, this doesn't work in IE (10). The dropdown opens. I have the same issue with my directive mentioned above.. really can't work out how to prevent event propagation when the X is clicked