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

css/backoffice/components/input/_input-select.scss

@@ -201,8 +201,9 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
 }
 
 // N°7982 Default selectize stylesheet override
+// N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
 .selectize-dropdown-content{
-  max-height: $ibo-input-select-selectize--dropdown--max-height;
+  max-height: calc(#{$ibo-input-select-selectize--dropdown--max-height} - 4px);
 }
 
 .selectize-dropdown.ui-menu .ui-state-active {

js/extkeywidget.js

@@ -171,7 +171,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 			// To avoid dropdown to be cut by the container's overflow hidden rule
 			dropdownParent: 'body',
 			onDropdownOpen: function (oDropdownElem) {
-				me.UpdateDropdownPosition(this.$control, oDropdownElem);
+				me.UpdateDropdownPosition(this.$control, oDropdownElem, this.$dropdown_content);
 			},
 		});
 		let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
@@ -314,13 +314,14 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 	};
 
 	/**
-	 * 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} oDropdownElem jQuery object representing the results dropdown
-	 * @return {void}
-	 */
-	this.UpdateDropdownPosition = function (oControlElem, oDropdownElem) {
+     * 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} oDropdownElem jQuery object representing the results dropdown
+     * @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();
 		oDropdownElem.css('width', fControlWidth);
@@ -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,14 +346,38 @@ 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();
 
-			// Position dropdown above input if not enough space on the bottom part of the screen
+            // N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
+            if(oDropdownContentElem) {
+                oDropdownContentElem.css('max-height', 'calc(30vh - 4px)');
+            }
+
+			/* 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

@@ -22,7 +22,7 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 
 	// Plugin options
 	aOptions = $.extend({
-			maxDropDownHeight: 200,
+			maxDropDownHeight: '200px',
 		},
 		aOptions
 	);
@@ -33,28 +33,47 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 	// Override position dropdown function
 	oSelf.positionDropdown = (function () {
 		return function () {
-			let iRefHeight = oSelf.$dropdown.outerHeight() < aOptions.maxDropDownHeight ?
-				oSelf.$dropdown.outerHeight() : aOptions.maxDropDownHeight;
+            // Clear previously set rules so the comparison is done with dropdown real height
+            oSelf.$dropdown.css({
+                'max-height': '',
+            });
 
-			if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iRefHeight > window.innerHeight){
+            oSelf.$dropdown_content.css({
+                'max-height': '',
+            });
 
-				oSelf.$dropdown.css({
-					top: oSelf.$control.offset().top - iRefHeight,
-					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}px`,
-					'overflow-y': 'auto',
-					'border-top': '1px solid #d0d0d0',
+					overflowY: '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
+                oSelf.$dropdown_content.css({
+                    'max-height': `calc(${aOptions.maxDropDownHeight} - 4px)`
+                });
+
 			}
 			else{
 				oSelf.$dropdown.css({
 					top: oSelf.$control.offset().top + oSelf.$control.outerHeight(),
 					left: oSelf.$control.offset().left,
 					width: oSelf.$wrapper.outerWidth(),
-					'max-height': `${aOptions.maxDropDownHeight}px`,
-					'overflow-y': 'auto'
-				});
+					overflowY: 'auto',
+                    borderTop: 'none'
+            });
 			}
 		};
 	}());

templates/base/components/input/set/layout.ready.js.twig

@@ -23,7 +23,7 @@ let oWidget{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').selectize({
         },
         {# PLUGIN combodo auto position  #}
         'combodo_auto_position' : {
-            maxDropDownHeight: 300, {# in px #}
+            maxDropDownHeight: '30vh', {# same value as external key widget #}
         },
         {# PLUGIN combodo add button #}
         {% if oUIBlock.HasAddOptionButton() %}