Incorrect placement of the validation feedback when using input groups

[AnReZa]

A few days ago, I opened this ticket on the vue-bootstrap repository. However, they said, that this is a bootstrap related issue, and that they cannot help me. So I want to ask here, if you can help me with that.

Thank you in advance for any feedback.

[ysds]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

[AnReZa]

@ysds Sorry, but I have no idea how to create a bootstrap-vue based live demo. Keep in mind, that this is not just regular bootstrap. I askey the guys over there (see the linked ticket above) and they said, that it's a bug on your side, and that they cannot fix it. I've provided some source code to reproduce the error in the linked ticket.

Normally, the display looks like this:
[ Description | Input field | Button ]

When the validation feedback appears, it looks like this:

[ Description | Input field |
Validation feedback
| Button ]

The correct behavior would be:

[ Description | Input field | Button ]
Validation feedback

[ysds]

Can you create a reduced test case with pure (static) HTML?

[AnReZa]

The main problem is, that vue creates the HTML source on the fly with JavaScript. I can't even see any proper HTML source, only in DOM explorer.

It looks like in order to connect the feedback text with the input field, they must be siblings in the DOM. This, though, doesn't work in a scenario, where you want to use an input group. In that case, the feedback text can only be a sibling of the input group, not the input itself. Otherwise, it will break the layout as described above.

As far as I understand it, vue's problem is, that they technically aren't able to connect the feedback text control with the input, as long as they are not direct siblings in the DOM. But I don't have much insight in the inner technical implementation of either your validation system, nor their translation from the vue.js XML template into real HTML and JS.

In my specific case, I could work around the problem, because I can set the validation state manually through my code. So I just linked both state properties to the same dataEntryNumberInvalid flag in my data model.

<b-input-group prepend="Serial or part №">
  <b-form-input type="text" class="form-control" v-model="dataEntryNumber" v-on:keydown.enter.prevent="getOrder" placeholder="Please enter a serial or part number here" :state="dataEntryNumberInvalid ? false : null"></b-form-input>

  <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>

<b-form-invalid-feedback :state="!dataEntryNumberInvalid">
  We could not find a product for your input. Please enter a valid reference.
</b-form-invalid-feedback>

However, as @tmorehouse explained in his answer to my original bootstrap-vue ticket, this would not work in any case, where I would only rely on browser validation. So please consider this ticket more as a "please fix this general problem together", instead of a "I have a specific problem with my code".

[tmorehouse]

@AnReZa See #23454 (and search for similar open/closed issues).

[ysds]

Closing per last comment.