From a122188953ac451a71492034a7c8742fa62664fd Mon Sep 17 00:00:00 2001 From: Andrii Malytskyi Date: Thu, 9 Mar 2017 15:33:19 +0200 Subject: [PATCH] fix(uiSelect): add class to dropdown instead of simple opacity change to remove flicker Previous behaviour and new one with punks are in issue #1583. --- src/common.css | 9 +++++++++ src/uiSelectDirective.js | 6 +++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/common.css b/src/common.css index aa2eb136d..d63575f95 100644 --- a/src/common.css +++ b/src/common.css @@ -17,6 +17,15 @@ top: 0px !important; } +/* send offscreen without breaking sizes*/ +.ui-select-detached { + position: fixed !important; + opacity: 0 !important; + visibility: hidden; + top: 100% !important; + left: 100% !important; + z-index: -1 !important; +} .ui-select-choices-row:hover { background-color: #f5f5f5; diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index 285cfb4ac..9055b538e 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -373,7 +373,7 @@ uis.directive('uiSelect', } // Display the dropdown once it has been positioned. - dropdown[0].style.opacity = 1; + dropdown[0].classList.remove('ui-select-detached'); }); }; @@ -389,7 +389,7 @@ uis.directive('uiSelect', // Hide the dropdown so there is no flicker until $timeout is done executing. if ($select.search === '' && !opened) { - dropdown[0].style.opacity = 0; + dropdown[0].classList.add('ui-select-detached'); opened = true; } @@ -411,7 +411,7 @@ uis.directive('uiSelect', } // Reset the position of the dropdown. - dropdown[0].style.opacity = 0; + dropdown[0].classList.add('ui-select-detached'); dropdown[0].style.position = ''; dropdown[0].style.top = ''; element.removeClass(directionUpClassName);