angular-ui / ui-select

AngularJS-native version of Select2 and Selectize
MIT License
3.26k stars 1.81k forks source link

UI Select choices dropdown became invisible with opacity set to 0 #1863

Open artuska opened 7 years ago

artuska commented 7 years ago

.ui-select-choices block's inline style set to opacity: 0; if any Angular version above 1.4.9 is used.

Everything worked perfectly fine with 1.4.9 version of Angular, but as I switched Angular's version to 1.5.9, 1.5.8, 1.5.3 or any 1.5.* version the dropdown became invisible.

Angular: 1.5.* UI-Select: 0.19.6, 0.19.5, 0.19.4 — checked all this three versions

Jefiozie commented 7 years ago

Hi @artuska Could you add a plunker and maybe create a PR for this? Happy to review your work.

jared-rufer commented 7 years ago

Ran into same issue.

It looks like before Angular 1.5 the ng-show directive that is in choices.tpl.html for bootstrap and select2 themes already went through a render cycle which removes the ng-hide css class by the time scope.calculateDropdownPos is executed. Later versions ng-hide is still on the '<ul class="ui-select-choices' element by time scope.calculateDropdownPos executes.

src/uiSelectDirective.js:396 ( scope.calculateDropdownPos function) - uisOffset(dropdown).height 
is 0 in Angular versions >= 1.5.
if (!uisOffset(dropdown).height && ...

Removing ng-hide manually allows uisOffset to return expected result.

Below is what the dom looks like when this function is being executed.

Angular 1.4.14

<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu" ng-show="$select.open &amp;&amp; $select.items.length &gt;0" repeat="..." style="opacity: 0;">

Angular 1.6.1 - Notice ng-hide.

<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-scope ng-hide" ng-show="$select.open &amp;&amp; $select.items.length &gt;0" repeat="..." style="opacity: 0;">
jared-rufer commented 7 years ago

This issue is the same as #1560 and https://github.com/angular/angular.js/issues/14304.

Using $animateProvider.classNameFilter is the cause.