b-input-group right border cannot be shown

<b-input-group :prepend="$t('Vendor') + ' : '">
  <b-form-input
     list="vendor-list-id"
     v-model="cur_vendor"
     @change="find_vendor_id"
     autocomplete="off"
  ></b-form-input>
  <datalist id="vendor-list-id">
    <option></option>
    <option
       v-for="vendor in vendor_cname_list"
       :key="vendor"
       :value="vendor"
    >
       {{ vendor }}
    </option>
  </datalist>
</b-input-group>

enter image description here

The above code will create an input group, but the right border disappears. Strangely, if I append a space at the end of <b-input-group> the border will show again, as such

<b-input-group :prepend="$t('Vendor') + ' : '" append=" ">
  <b-form-input
     list="vendor-list-id"
     v-model="cur_vendor"
     @change="find_vendor_id"
     autocomplete="off"
  ></b-form-input>
  <datalist id="vendor-list-id">
    <option></option>
    <option
       v-for="vendor in vendor_cname_list"
       :key="vendor"
       :value="vendor"
    >
       {{ vendor }}
    </option>
  </datalist>
</b-input-group>

enter image description here

Anyone know what is causing this behaviour? And how to fix it? Thank you!