.invalid-feedback doesn't show for .input-group with an invalid control

Created by: br3nt

I'm reposting an outstanding bug that is documented in #23454 (closed) (closed). That issue has received ALOT of attention over a two year period but has not received a resolution.

Original issue:

Example:

<div class="form-group col-md-4">
  <label class="form-control-label is-invalid" for="valuation_value">Estimated Value</label>
  <div class="input-group is-invalid">
    <span class="input-group-addon">£</span>
    <input class="form-control is-invalid" min="0" type="number" value="" name="valuation[value]">
  </div>
  <div class="invalid-feedback">can't be blank, is not a number</div>
</div>

Results in:

I would expect to see can't be blank, is not a number under the input-group.

Summary of working hacks:

There are two working solutions (aka hacks) to get the invalid-feedback displaying for custom-file with an input-group-append.

1. Adding the flex-wrap class to the custom-file and adding the w-100 class to the invalid-feedback element.

    <div class="section measurements-area" style="display: none">
        <h4>Measure your test sample and upload the csv file</h4>
        <form id="measurements-form" class="needs-validation" novalidate>
            <div class="input-group input-group-sm">
                <div class="custom-file flex-wrap">
                    <input type="file" class="custom-file-input" id="measurements" required>
                    <div class="invalid-feedback w-100">
                        The measurements file is required.
                    </div>
                    <label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
                </div>
            </div>
        </form>
    </div>

2. Adding style="position: absolute; top: 3.0em" to the invalid-feedback element.

<form id="measurements-form" class="needs-validation" novalidate>
    <div class="input-group input-group-sm">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="measurements" required>
            <div class="invalid-feedback" style="position: absolute; top: 3.0em">
                The measurements file is required.
            </div>
            <label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
        </div>
        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
        </div>
    </div>
</form>

The downside to both of these is that invalid-feedback element no longer takes up space so elements below the custom-file don't accommodate by moving down to maintain expected spacing.

Furthermore, The following solutions DO NOT work for custom-file:

1. Adding the class d-block or d-flex to the invalid-feedback element.

.input-group {
    flex-wrap: wrap!important;
}

.input-group .invalid-feedback {
    flex-basis: 100%!important;
}

Also, the invalid-feedback element already has the property display: block.