Using b-form-invalid-feedback together with a b-input-group

This might be related to #1566. I have a text input field with a button appended to its right side. I want to show some feedback, when the user enters wrong data. However, with the current setup, this breaks my layout as soon as the text appears, because it throws the button below the error text.

<b-input-group prepend="Serial or part №" class="mb-3">
  <b-form-input type="text" class="form-control" v-model="dataEntryNumber" placeholder="Please enter a serial or part number here" :state="dataEntryNumberInvalid ? false : null"></b-form-input>
  <b-form-invalid-feedback>
    This is not a valid product.
  </b-form-invalid-feedback>
  <b-input-group-append>
    <b-button variant="success" @click="getOrder()" :disabled="!dataEntryNumber || gettingOrder || complaint.articles.length >= 10">
      <font-awesome-icon v-if="gettingOrder" icon="spinner" pulse />
      <font-awesome-icon v-else icon="plus" />
    </b-button>
  </b-input-group-append>
</b-input-group>

Placing the invalid feedback part below the input group (which would sound logic to me), doesn’t work as well, because it must be a direct sibling of the input. So how can I fix this?

[tmorehouse]

This is a bootstrap V4.x issue (and has many, many open and closed issues at their GitHub repo).

If you are using javascript validation, I would suggest placing the feedback under the input group and setting the ‘state’ prop on both the input and feedback components.

If you are relying only on browser validation, then you are S.O.L. with Bootstrap V4.x CSS 😦

[tmorehouse]

Most are closed: but are not resolved:

• https://github.com/twbs/bootstrap/issues/23454
• https://github.com/twbs/bootstrap/issues/24709
• https://github.com/twbs/bootstrap/issues/25110
• https://github.com/bootstrap-vue/bootstrap-vue/issues/1251

and more…

it is because of the sibling selector combo needed for native input validation. With “javascript” validation (or server-side validation as bootstrap calls it) we have more control since we can use the state prop of inputs and feedback to force show the validation state and feedback, regardless of placement.