From fea430df2731a2d1eaf6a020bfb16b75b268bcdc Mon Sep 17 00:00:00 2001
From: Hector Romero <tochoromero@users.noreply.github.com>
Date: Thu, 19 Mar 2020 10:12:32 -0700
Subject: [PATCH] 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       | 4 ++--
 src/scss/modules/_dropdown-menu.scss | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/directives/appendToBody.js b/src/directives/appendToBody.js
index 9296c9d..40cac06 100644
--- a/src/directives/appendToBody.js
+++ b/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',
             });
diff --git a/src/scss/modules/_dropdown-menu.scss b/src/scss/modules/_dropdown-menu.scss
index 7bbbc5e..3e1af38 100644
--- a/src/scss/modules/_dropdown-menu.scss
+++ b/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;