Angular Outline Text Input Responds Slowly with Label Click

Expected behavior

When a user clicks anywhere on an outline text input, the input gets focus and responds by moving the label text up out of the way quickly so the user can type.

Actual behavior

When a user clicks on the label of an outline text input, the input gets focus but responds much slower than when a user clicks in the blank space of the outline input.

Resources (screenshots, code snippets etc.)

Gif of the problem: https://media.giphy.com/media/Mku4Wmruk5ALI2uHAr/giphy.gif

HTML Code:

<div
  class="md-form md-outline"
  [hidden]="!displayField.visible"
  [formGroup]="parentFormGroup"
>
  <input
    [id]="displayField.id"
    [formControlName]="fieldName"
    [attr.data-naaccr-item-number]="fieldName"
    type="text"
    length="10"
    class="form-control"
    mdbCharCounter
    mdbInput
  />
  <label [for]="displayField.id">{{
    displayField.isCritical ? "* " + displayField.label : displayField.label
  }}</label>
</div>

JS Code:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, ControlContainer, FormControl } from '@angular/forms';
import { DisplayField } from 'src/app/shared/models';
@Component({
  selector: 'dcpc-wp-abstract-form-unbounded-field',
  templateUrl: './abstract-form-unbounded-field.component.html',
  styleUrls: ['./abstract-form-unbounded-field.component.scss'],
})
export class AbstractFormUnboundedFieldComponent implements OnInit {
  @Input()
  displayField: DisplayField;
  parentFormGroup: FormGroup;
  fieldName: string;
  constructor(private readonly controlContainer: ControlContainer) {}
  ngOnInit(): void {
    this.parentFormGroup = <FormGroup>this.controlContainer.control;
    this.fieldName = this.displayField.naaccrItemNumber.toString();
    this.parentFormGroup.addControl(this.fieldName, new FormControl());
  }
}