jquery.suggestions: Correctly place dropdown for inputs with 'position: fixed'

If the input has 'position: fixed', or is within another element with
'position: fixed', then the dropdown must also have 'position: fixed'
and its position has to be calculated relative to viewport rather than
relative to document.

Bug: T210321
Change-Id: Iae795ef03d888c2b8cc1d5e7463c4692a7eeb138

diff --git a/resources/src/jquery/jquery.suggestions.js b/resources/src/jquery/jquery.suggestions.js
index d9a094c..a585cf3 100644 (file)
--- a/resources/src/jquery/jquery.suggestions.js
+++ b/resources/src/jquery/jquery.suggestions.js
@@ -247,6 +247,7 @@
                configure: function ( context, property, value ) {
                        var newCSS,
                                $result, $results, $spanForWidth, childrenWidth,
+                               regionIsFixed, regionPosition,
                                i, expWidth, maxWidth, text;
 
                        // Validate creation using fallback values
@@ -271,8 +272,22 @@
                                                        // Rebuild the suggestions list
                                                        context.data.$container.show();
                                                        // Update the size and position of the list
+                                                       regionIsFixed = ( function () {
+                                                               var $el = context.config.$region;
+                                                               do {
+                                                                       if ( $el.css( 'position' ) === 'fixed' ) {
+                                                                               return true;
+                                                                       }
+                                                                       $el = $( $el[ 0 ].offsetParent );
+                                                               } while ( $el.length );
+                                                               return false;
+                                                       }() );
+                                                       regionPosition = regionIsFixed ?
+                                                               context.config.$region[ 0 ].getBoundingClientRect() :
+                                                               context.config.$region.offset();
                                                        newCSS = {
-                                                               top: context.config.$region.offset().top + context.config.$region.outerHeight(),
+                                                               position: regionIsFixed ? 'fixed' : 'absolute',
+                                                               top: regionPosition.top + context.config.$region.outerHeight(),
                                                                bottom: 'auto',
                                                                width: context.config.$region.outerWidth(),
                                                                height: 'auto'
@@ -306,7 +321,7 @@
                                                                                        expandFrom = 'start';
                                                                                } else {
                                                                                        // Calculate the center points of the input and document
-                                                                                       regionCenter = $region.offset().left + regionWidth / 2;
+                                                                                       regionCenter = regionPosition.left + regionWidth / 2;
                                                                                        docCenter = docWidth / 2;
                                                                                        if ( Math.abs( regionCenter - docCenter ) < ( 0.10 * docCenter ) ) {
                                                                                                // If the input's center is within 10% of the document center
@@ -334,12 +349,12 @@
 
                                                        if ( context.config.expandFrom === 'left' ) {
                                                                // Expand from left
-                                                               newCSS.left = context.config.$region.offset().left;
+                                                               newCSS.left = regionPosition.left;
                                                                newCSS.right = 'auto';
                                                        } else {
                                                                // Expand from right
                                                                newCSS.left = 'auto';
-                                                               newCSS.right = $( 'body' ).width() - ( context.config.$region.offset().left + context.config.$region.outerWidth() );
+                                                               newCSS.right = $( 'body' ).width() - ( regionPosition.left + context.config.$region.outerWidth() );
                                                        }
 
                                                        context.data.$container.css( newCSS );