Expected behavior Given an outlined input field in a form:

  <form autocomplete="off" [formGroup]="form">
    <div class="md-form md-outline">
      <input mdbInput type="text" class="form-control" id="foo1" formControlName="foo1">
      <label for="foo1">Label 1</label>
    </div>
  </form>

The outlined input label is displayed correctly

And I would expect the same behavior when the same input field is part of an input group

  <form autocomplete="off" [formGroup]="form">
    <div class="md-form md-outline input-group">
      <input mdbInput type="text" class="form-control" id="foo2" formControlName="foo2">
      <label for="foo2">Label 2</label>
      <div class="input-group-append">
        <button mdbBtn color="info" size="md" class="m-0 px-3 py-2" type="button" id="button-foo2"
                mdbWavesEffect>Button</button>
      </div>
    </div>
  </form>

But the label is transparent

Actual behavior

It might be a bug :-) In the meantime can you please tell me how to fix it?

Thanks! Resources (screenshots, code snippets etc.)