Clicking on ui-select's caret does not toggle the dropdown

[artuska]

Clicking exactly on

<i class="caret pull-right" ng-click="$select.toggle($event)"></i>

does not toggle the dropdown.

Angular: 1.4.9
UI-Select: 0.19.4
Bootstrap theme

[Jefiozie]

As described in the issue template you should add a plunker as this is needed to see the problem.

[decherneyge]

seems to be related to search-enabled="false"

http://plnkr.co/edit/OqLeViJM7qFYuVFleklj?p=preview

UPDATE:
based on @katsos answer below I ended up doing the following:

$("body").on('click', '.ui-select-toggle>i.caret', function(e){
            e.stopPropagation();

            var parent = $(this).parent('.ui-select-toggle');
            if(parent){
                parent.click();
            }

        });

[jbarrus]

Looks like it was probably introduced with this commit - be0d301

[katsos]

Using jQuery I did it this way:

initFiltersEvents() {
        let multiFilters = $('.filterClass');

        /* For each filter, disable propagation of input and trigger input on click. */
        multiFilters.each( (index, multiFilter) => {
            let input = $(multiFilter).find('.ui-select-search');

            input.on('click', event => event.stopPropagation() );

            $(multiFilter).on('click', event => {
                event.stopPropagation();
                input.trigger('click');
            });
        });
    }

[amihaylov]

I'm also experiencing the issue (angular 1.5.8, ui-bootstrap 2.2.0 (if applicable) and tested with ui-select from 0.19.4 to 0.18.0). However changing search-enabled to true or false or removing it completely didnt have any effect. Turned out that the issue is with opacity of the ui-select-dropdown inside the ui-select-container so as a workaround I am toggling it whether the container has class open or not.

[artuska]

As a temporary fix I used CSS and added z-index for the span and .caret elements so the span is above and overlapping the .caret and user always clicks on span not on .caret.

[troywoy]

@artuska, what was the CSS for your solution and what span did you apply it to? I have a hunch that your solution may just hack my way into a working ui-select as well.

Edit:
I'm using this...

.ui-select-toggle { z-index: 1; }
.caret { z-index: -1; }

[mzealey]

Issue for us too.

[Red-3]

+1 - this is something that is causing us unexpected grief

[Red-3]

@twh1808 Thanks for your CSS workaround.

I found that ui-select also has a wide padding on the ui-select-toggle which prevented clicking on the right half of the arrow glyph in my case.
Had to suppress padding on the right to overcome it:

.ui-select-toggle { z-index: 1; padding-right: 4px; }
.caret { z-index: -1; }

[troywoy]

@Red-3, I haven't seen much activity on this so hopefully it's just a temporary workaround but I'm not so sure I'll ever be able to remove it. Glad it was of help to you, @artuska is probably the one to thank though, as his original comment made me realize this could be easily overcome with CSS rather than hack-y JavaScript.

I looked into the UI-Select examples to verify your padding comment, and yeah you would have to do something to account for the right side as the element only lays on half of the arrow. I worked with another colleague skinning a large application built on Angular and Angular UI Bootstrap, and in our efforts we changed the padding size and arrow positioning such that this specific issue didn't apply to us.

Good catch for others, though!

[mzealey]

I'm using bootstrap + font-awesome with non-transparent search boxes. I had to do the following less to work around it:

.ui-select-bootstrap {
    .ui-select-toggle > .caret { display: none }
    .ui-select-toggle::after {
        .glyphicon();
        content: @fa-var-caret-down;
        position: absolute;
        right: 1em;
        padding-top: 4px;
    }
}

[Jefiozie]

Maybe somebody could make a good PR for this?