Fixed positioning bug when append slot is used

Author: alexurquhart

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-bootstrap-typeahead",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "A typeahead/autocomplete component for Vue 2 using Bootstrap 4",
   "keywords": [

src/components/VueBootstrapTypeahead.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div :class="sizeClasses">
-      <div v-if="$slots.prepend || prepend" class="input-group-prepend">
+      <div ref="prependDiv" v-if="$slots.prepend || prepend" class="input-group-prepend">
         <slot name="prepend">
           <span class="input-group-text">{{ prepend }}</span>
         </slot>
@@ -116,8 +116,17 @@ export default {
   methods: {
     resizeList(el) {
       const rect = el.getBoundingClientRect()
-      // this.$refs.list.$el.style.top = rect.height + 5 + 'px'
-      this.$refs.list.$el.style.width = rect.width + 'px'
+      const listStyle = this.$refs.list.$el.style
+
+      // Set the width of the list on resize
+      listStyle.width = rect.width + 'px'
+
+      // Set the margin when the prepend prop or slot is populated
+      // (setting the "left" CSS property doesn't work)
+      if (this.$refs.prependDiv) {
+        const prependRect = this.$refs.prependDiv.getBoundingClientRect()
+        listStyle.marginLeft = prependRect.width + 'px'
+      }
     },
 
     handleHit(evt) {