height when control_input isn't inside control. fixes #383

Author: oyejorge

src/scss/tom-select.bootstrap5.scss

@@ -94,6 +94,9 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 .#{$select-ns}-wrapper.form-control,
 .#{$select-ns}-wrapper.form-select{
 	padding:0 !important;
+	height: auto;
+	box-shadow: none;
+	display: flex;
 }
 
 .#{$select-ns}-dropdown,
@@ -137,7 +140,6 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 }
 
 .#{$select-ns}-control {
-	//min-height: $input-height; // causes wrapper to be 2px too large
 	@include box-shadow($input-box-shadow);
 	@include transition($input-transition);
 	display:flex;
@@ -169,21 +171,22 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
 
 .#{$select-ns}-wrapper {
+	min-height: $input-height;
+	display:flex;
 
 	.input-group-sm > &,
 	&.form-select-sm,
 	&.form-control-sm{
+		min-height: $input-height-sm;
 
 		.#{$select-ns}-control{
-			min-height: $input-height-sm;
 			padding: 0 .75rem;
 				//padding: $input-padding-y-sm $input-padding-x-sm;
 			@include border-radius($input-border-radius-sm);
 			@include font-size($input-font-size-sm);
 		}
 
 		&.has-items .#{$select-ns}-control{
-			min-height: $input-height-sm !important;
 			font-size: $input-font-size-sm;
 			padding-bottom: 0;
 		}
@@ -213,11 +216,11 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 		}
 	}
 
-	.input-group-lg > & >,
+	.input-group-lg > &,
 	&.form-control-lg,
 	&.form-select-lg{
-	.#{$select-ns}-control{
-			min-height: $input-height-lg;
+		min-height: $input-height-lg;
+		.#{$select-ns}-control{
 			@include border-radius($input-border-radius-lg);
 			@include font-size($input-font-size-lg);
 		}
@@ -244,9 +247,6 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
 .#{$select-ns}-wrapper.form-control,
 .#{$select-ns}-wrapper.form-select{
-	padding: 0;
-	height: auto;
-	box-shadow: none;
 
 	.#{$select-ns}-control,
 	&.single.input-active .#{$select-ns}-control{

src/scss/tom-select.default.scss

@@ -16,6 +16,9 @@ $select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
 @include ts-caret();
 
 .#{$select-ns}-wrapper {
+	display:flex;
+	min-height:$select-line-height + ($select-padding-y*2) + ($select-border-width *2);
+
 	&.multi {
 
 		&.has-items .#{$select-ns}-control {

src/scss/tom-select.scss

@@ -49,7 +49,8 @@ $select-opacity-disabled:						0.5 !default;
 
 $select-shadow-input:							none !default;
 $select-shadow-input-focus:						none !default;
-$select-border:									1px solid $select-color-border !default;
+$select-border-width:							1px !default;
+$select-border:									$select-border-width solid $select-color-border !default;
 $select-dropdown-border:						1px solid $select-color-dropdown-border !default;
 $select-border-radius:							3px !default;