Option list of ui-select does not work in ui-bootstrap modals

[markusguenther]

Bug description:

I have the problem that the dropdown with the options is not visible in a modal of the ui bootstrap directive. I tried to provide a plunker that is close to my usecase. Hope that it is not to confusing.

If i search for e.g. Berlin in the select of the modal, the options are visible. But not initialy when i click the dropdown. Outside the modal it works fine.

I am confused and found some issues that has the same problem but was closed in the past. But in my opinion it was never really a solution. Sometimes hacks and the z-index foo does not work for me.

Hope that someone can give me a hint or can confirm that it is a ui-select bug.

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/7Wznx7

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: 1.5.8

UI-Select:0.19.4

Bootstrap/Select2/Selectize CSS (if applicable): Bootstrap

[ironjb]

I have run into this problem as well. It appears mainly to deal with the ui-select when you are also using angular-animate. I have created a plunker to demonstrate what I was able to find and a possible temporary workaround.

http://plnkr.co/edit/UaSWgr

[Rakhmanov]

@ironjb Great work around. Has Little shorter version of writing instead of whole config object.

    var modalInstance = $uibModal.open({
        component: 'ModalComponent',
        appendTo: angular.element('#NgCtrlTag')
     });

[markusguenther]

@ironjb @Rakhmanov Thank you very much for such great workarounds.

Worked perfect for me :)

[SebiSebi]

@ironjb Thanks for the fix. Maybe it is easier to completely remove ngAnimate if you don't use it.

[trd-warren]

I also met this problem while using ui-modal and I solve this using 'ng-class' condition to the ui-select-choices directive:

modal.html

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true">
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </ui-select-choices>
    <ui-select-no-choice>
        一致するものは見つかりませんでした。
    </ui-select-no-choice>
</ui-select>

app.js

$scope.onSelect = function(item) {
    $scope.open_select = false;
}

style.css

.select_open {
	opacity: 1 !important;
}

Hope it helps. 👍

[YidingW]

I use css to override the opacity as a temporary fix.

.ui-select-container.open>.ui-select-choices{
    opacity: 1 !important;
}