diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index 3032d8168..88a602a62 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -323,10 +323,41 @@ uis.directive('uiSelect', }; - scope.calculateDropdownPos = function(){ + var calculateDropdownPosAfterAnimation = function() { + // Delay positioning the dropdown until all choices have been added so its height is correct. + $timeout(function() { + if ($select.dropdownPosition === 'up') { + //Go UP + setDropdownPosUp(); + } else { + //AUTO + element.removeClass(directionUpClassName); + + var offset = uisOffset(element); + var offsetDropdown = uisOffset(dropdown); + + //https://code.google.com/p/chromium/issues/detail?id=342307#c4 + var scrollTop = $document[0].documentElement.scrollTop || $document[0].body.scrollTop; //To make it cross browser (blink, webkit, IE, Firefox). + + // Determine if the direction of the dropdown needs to be changed. + if (offset.top + offset.height + offsetDropdown.height > scrollTop + $document[0].documentElement.clientHeight) { + //Go UP + setDropdownPosUp(offset, offsetDropdown); + }else{ + //Go DOWN + setDropdownPosDown(offset, offsetDropdown); + } + } + // Display the dropdown once it has been positioned. + dropdown[0].style.opacity = 1; + }); + }; + + scope.calculateDropdownPos = function() { if ($select.open) { dropdown = angular.element(element).querySelectorAll('.ui-select-dropdown'); + if (dropdown.length === 0) { return; } @@ -334,46 +365,27 @@ uis.directive('uiSelect', // Hide the dropdown so there is no flicker until $timeout is done executing. dropdown[0].style.opacity = 0; - // Delay positioning the dropdown until all choices have been added so its height is correct. - $timeout(function(){ - - if ($select.dropdownPosition === 'up'){ - //Go UP - setDropdownPosUp(); - - }else{ //AUTO + if (!uisOffset(dropdown).height && $select.$animate && $select.$animate.on && $select.$animate.enabled(dropdown)) { + var needsCalculated = true; - element.removeClass(directionUpClassName); - - var offset = uisOffset(element); - var offsetDropdown = uisOffset(dropdown); - - //https://code.google.com/p/chromium/issues/detail?id=342307#c4 - var scrollTop = $document[0].documentElement.scrollTop || $document[0].body.scrollTop; //To make it cross browser (blink, webkit, IE, Firefox). - - // Determine if the direction of the dropdown needs to be changed. - if (offset.top + offset.height + offsetDropdown.height > scrollTop + $document[0].documentElement.clientHeight) { - //Go UP - setDropdownPosUp(offset, offsetDropdown); - }else{ - //Go DOWN - setDropdownPosDown(offset, offsetDropdown); + $select.$animate.on('enter', dropdown, function (elem, phase) { + if (phase === 'close' && needsCalculated) { + calculateDropdownPosAfterAnimation(); + needsCalculated = false; } - - } - - // Display the dropdown once it has been positioned. - dropdown[0].style.opacity = 1; - }); + }); + } else { + calculateDropdownPosAfterAnimation(); + } } else { - if (dropdown === null || dropdown.length === 0) { - return; - } + if (dropdown === null || dropdown.length === 0) { + return; + } - // Reset the position of the dropdown. - dropdown[0].style.position = ''; - dropdown[0].style.top = ''; - element.removeClass(directionUpClassName); + // Reset the position of the dropdown. + dropdown[0].style.position = ''; + dropdown[0].style.top = ''; + element.removeClass(directionUpClassName); } }; };