fix: use width from getBoundingClientRect as the default for calculatePosition (#1114)

* fix: use box-sizing: border-box; on dropdown menu

Co-authored-by: Jeff <sagalbot@gmail.com>

src/directives/appendToBody.js

@@ -1,10 +1,10 @@
 export default {
     inserted (el, bindings, {context}) {
         if (context.appendToBody) {
-            const {height, top, left} = context.$refs.toggle.getBoundingClientRect();
+            const {height, top, left, width} = context.$refs.toggle.getBoundingClientRect();
 
             el.unbindPosition = context.calculatePosition(el, context, {
-                width: context.$refs.toggle.clientWidth + 'px',
+                width: width + 'px',
                 top: (window.scrollY + top + height) + 'px',
                 left: (window.scrollX + left) + 'px',
             });

src/scss/modules/_dropdown-menu.scss

@@ -13,6 +13,7 @@ $max-height: $vs-dropdown-max-height;
 
 .vs__dropdown-menu {
   display: block;
+  box-sizing: border-box;
   position: absolute;
   top: calc(100% - #{$border-width}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
   left: 0;