Feedback attribute breaks InputGroups

[Meknassih]

Hi, I just noticed that adding a feedback attribute for validation purposes to an Input breaks it from its suffix element in an InputGroup.

I have noticed that changing the order of the elements fixes the issue.

Generated HTML (broken) :

<div class="input-group">
    <input id="totalWeight" class="form-control is-invalid" type="text" name="" placeholder="100">
    <div class="invalid-feedback">Ce champ est obligatoire</div>
    <span class="input-group-text">kg</span>
</div>

Working HTML (fixed by swapping div.invalid-feedback and span.input-group-text) :

<div class="input-group">
    <input id="totalWeight" class="form-control is-invalid" type="text" name="" placeholder="100">
    <span class="input-group-text">kg</span>
    <div class="invalid-feedback">Ce champ est obligatoire</div>
</div>

[bestguy]

Ah thanks @Meknassih - hmm that's a tough one to fix since the feedback would be rendered by the Input, and can't split the elements like that. Am assuming this is the best workaround for now:

<InputGroup>
    <Input id="totalWeight" invalid placeholder="100" />
    <InputGroupText>kg</InputGroupText >
   <FormFeedback>Ce champ est obligatoire</FormFeedback>
</InputGroup >

I'll look and see if some better option, thanks for the heads up.