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 and the cursor goes to the beginning of the input to accept the user keyboard inputs.

Actual behavior

When a user clicks the label/placeholder text within the outline text input, the input does not get focus or respond in any way, like it was never clicked. However, if the user clicks the blank space next to label/placeholder text the input gets focus and responds correctly.

Resources (screenshots, code snippets etc.)

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

Code for the second input in the gif above

<div class="md-form md-outline">
        <input
          mdbInput
          type="number"
          id="nameFilter"
          class="form-control"
          autocomplete="off"
        />
        <label for="nameFilter">Search Social Security</label>
      </div>