Cannot get focus when clicking on the grey label inside a in

*Expected behavior*Get the focus when I click on inside label

*Actual behavior*Get focus when click on sustaining line, outside of inside label but NOT on inside labbel

Resources (screenshots, code snippets etc.)

      <form [formGroup]="searchAnimalOwnerForm" (ngSubmit)="onSubmit()">
        <div class="row" style="padding-left: 10px">
          <div
            class="col-12 col-md-4 col-ml-3"
            style="margin-left: 5px; margin-bottom: 15px"
          >
            <div
              class="md-form"
              style="margin-top: -5px; margin-bottom: 15px"
            >
              <input
                mdbInput
                mdbValidate
                type="text"
                class="form-control"
                id="microchipNumber"
                formControlName="microchipNumber"
                autofocus
              />
              <label
                for=""
                [innerHTML]="'generic.microchipNumber' | translate"
              ></label>
              <mdb-error *ngIf="submitted && f.microchipNumber.errors">
                <div
                  *ngIf="f.microchipNumber.errors.required"
                  [innerHTML]="'message.mandatoryField' | translate"
                ></div>
              </mdb-error>
            </div>
          </div>
          <div class="col-md-3 ml-2 mb-2">
            <button mdbBtn class="btn btn-primary" type="submit">
              {{ "button.search" | translate }}
              <i class="fas fa-search ml-1"></i>
            </button>
          </div>
        </div>
      </form>