fix: position top / style for bootstrap 4/5

Author: fabienwnklr

src/plugins/auto_position/plugin.js

@@ -25,7 +25,7 @@ Selectize.define("auto_position", function () {
         const styleToAdd = { bottom: offset.top, top: 'unset' };
 
         if (this.settings.dropdownParent === 'body') {
-          styleToAdd.top = offset.top - this.$dropdown.prop('scrollHeight') - $control.outerHeight(true);
+          styleToAdd.top = offset.top - this.$dropdown.outerHeight(true) - $control.outerHeight(true);
           styleToAdd.bottom = 'unset';
         }
         Object.assign(styles, styleToAdd);

src/plugins/auto_position/plugin.scss

@@ -2,6 +2,7 @@
   border-top: 1px solid $select-color-border;
   border-bottom: 0 none;
   border-radius: 3px 3px 0 0;
+  box-shadow: 0 -6px 12px rgb(0 0 0 / 18%);
 }
 
 .#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {

src/scss/selectize.bootstrap5.scss

@@ -171,3 +171,13 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
   overflow: unset;
   border-radius: 0 $select-border-radius $select-border-radius 0;
 }
+
+.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
+  border-top: $select-border;
+  border-bottom: $select-border;
+  border-radius: $select-border-radius;
+}
+.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+  border-radius: $select-border-radius;
+  border-top: $select-border;
+}