N°9468 - Make sure max-height is removed if needed, harmonize behavior between extkey and input set

js/extkeywidget.js

@@ -314,12 +314,13 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 	};
 
 	/**
-	 * Update the dropdown's position so it always fits in the screen
+     * Update the dropdown's position so it always fits in the screen
-	 *
+     *
-	 * @param {object} oControlElem jQuery object representing the "control" input (= where the user types) of the external key
+     * @param {object} oControlElem jQuery object representing the "control" input (= where the user types) of the external key
-	 * @param {object} oDropdownElem jQuery object representing the results dropdown
+     * @param {object} oDropdownElem jQuery object representing the results dropdown
-	 * @return {void}
+     * @param {object|undefined} oDropdownContentElem
-	 */
+     * @return {void}
+     */
 	this.UpdateDropdownPosition = function (oControlElem, oDropdownElem, oDropdownContentElem) {
 		// First fix width to ensure it's not too long
 		const fControlWidth = oControlElem.outerWidth();
@@ -328,6 +329,13 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 		// Then, fix height / position to ensure it's within the viewport
 		const fWindowHeight = window.innerHeight;
 
+        // Clear previously set rule so the comparison is done with dropdown real height
+        oDropdownElem.css('max-height', '');
+
+        if(oDropdownContentElem) {
+            oDropdownContentElem.css('max-height', '');
+        }
+
 		const fControlTopY = oControlElem.offset().top;
 		const fControlHeight = oControlElem.outerHeight();
 
@@ -338,7 +346,9 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 
 		if (fDropdownBottomY > fWindowHeight) {
 			// Set dropdown max-height to 1/3 of the screen, this way we are sure the dropdown will fit in either the top / bottom half of the screen
-			oDropdownElem.css('max-height', '30vh');
+			oDropdownElem.css({
+                maxHeight: '30vh',
+            });
 			fDropdownHeight = oDropdownElem.outerHeight();
 
             // N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
@@ -346,11 +356,28 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
                 oDropdownContentElem.css('max-height', 'calc(30vh - 4px)');
             }
 
-			// Position dropdown above input if not enough space on the bottom part of the screen
+			/* Position dropdown above input if not enough space on the bottom part of the screen
+               Doesn't seem to work with selectize as an internal plugin "auto_position" refreshes the top position after
+               this method is called, input set use a custom plugin to avoid fix this issue "plugin_combodo_auto_position"
+               This would need to take the potential 4px difference into account if this is fixed.
+			 */
 			if ((fDropdownTopY / fWindowHeight) > 0.6) {
-				oDropdownElem.css('top', fDropdownTopY - fDropdownHeight - fControlHeight);
+                oDropdownElem.css({
-			}
+                    top: fDropdownTopY - fDropdownHeight - fControlHeight,
+                    borderTop: oDropdownElem.css('border-bottom')
+                });
+            }
+            else {
+                oDropdownElem.css({
+                    borderTop: 'none'
+                })
+            }
 		}
+        else {
+            oDropdownElem.css({
+                borderTop: 'none'
+            })
+        }
 	};
 	this.ManageScroll = function () {
 		if ($('#label_'+me.id).scrollParent()[0].tagName != 'HTML') {

js/selectize/plugin_combodo_auto_position.js

@@ -33,15 +33,31 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 	// Override position dropdown function
 	oSelf.positionDropdown = (function () {
 		return function () {
-			let iRefHeight = oSelf.$dropdown.outerHeight();
+            // Clear previously set rules so the comparison is done with dropdown real height
-			if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iRefHeight > window.innerHeight){
+            oSelf.$dropdown.css({
+                'max-height': '',
+            });
 
-				oSelf.$dropdown.css({
+            oSelf.$dropdown_content.css({
-					top: oSelf.$control.offset().top - iRefHeight,
+                'max-height': '',
-					left: oSelf.$control.offset().left,
+            });
+
+            let iDropdownHeight = oSelf.$dropdown.outerHeight();
+			if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iDropdownHeight > window.innerHeight){
+
+                // Apply max-height as we are overflowing, that'll allow us to calculate where we should place ourselves later
+                oSelf.$dropdown.css({
+                    maxHeight: `${aOptions.maxDropDownHeight}`,
+                })
+
+                iDropdownHeight = oSelf.$dropdown.outerHeight();
+
+                oSelf.$dropdown.css({
+                    top: oSelf.$control.offset().top - iDropdownHeight + 4, // Content will be shorter, so our real height too
+                    left: oSelf.$control.offset().left,
 					width: oSelf.$wrapper.outerWidth(),
-					'max-height': `${aOptions.maxDropDownHeight}`,
+					overflowY: 'auto',
-					'overflow-y': 'auto',
+                    borderTop : oSelf.$dropdown.css('border-bottom')
 				});
 
                 // N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
@@ -55,8 +71,9 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 					top: oSelf.$control.offset().top + oSelf.$control.outerHeight(),
 					left: oSelf.$control.offset().left,
 					width: oSelf.$wrapper.outerWidth(),
-					'overflow-y': 'auto'
+					overflowY: 'auto',
-				});
+                    borderTop: 'none'
+            });
 			}
 		};
 	}());