fix: input and dropdown width

selectize · Dec 23, 2022 · 357678c · 357678c
1 parent b7d625c
commit 357678c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/selectize.js b/src/selectize.js
@@ -172,7 +172,7 @@ $.extend(Selectize.prototype, {
     // to have an identical rendering to a simple select (usefull for mobile device and do not open keyboard)
     if (!self.settings.search) {
       $control_input.attr('readonly', true);
-	  $control_input.attr('inputmode', 'none');
+	    $control_input.attr('inputmode', 'none');
       $control.css('cursor', 'pointer');
     }
 
@@ -2013,7 +2013,7 @@ $.extend(Selectize.prototype, {
 		var $control = this.$control;
 		var offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();
 		offset.top += $control.outerHeight(true);
-		var w = $control[0].getBoundingClientRect().width;
+		var w = this.$wrapper[0].style.width !== 'fit-content' ? '100%' : 'max-content';
 		if (this.settings.minWidth && this.settings.minWidth > w)
 		{
 			w = this.settings.minWidth;
@@ -2023,6 +2023,12 @@ $.extend(Selectize.prototype, {
 			top   : offset.top,
 			left  : offset.left
 		});
+
+    if (w === 'max-content' && $control[0].getBoundingClientRect().width >= this.$dropdown[0].getBoundingClientRect().width) {
+      this.$dropdown.css({
+        width : '100%'
+      });
+    }
 	},
 
   setupDropdownHeight: function () {

diff --git a/src/utils.js b/src/utils.js
@@ -333,14 +333,15 @@ var autoGrow = function ($input) {
       }
     }
 
+    var width = $input.attr('readonly') ? 0 : 4;
     placeholder = $input.attr('placeholder');
     if (placeholder) {
-      placeholderWidth = measureString(placeholder, $input) + 4;
+      placeholderWidth = measureString(placeholder, $input) + width;
     } else {
       placeholderWidth = 0;
     }
 
-    width = Math.max(measureString(value, $input), placeholderWidth) + 4;
+    width = Math.max(measureString(value, $input), placeholderWidth) + width;
     if (width !== currentWidth) {
       currentWidth = width;
       $input.width(width);