Нажатие на метки выделяет текст метки и не отображает ввод: событие фокуса

Question

Метка не связывается с полем ввода при загрузке страницы. Когда я нажимаю на текстовое поле метки, он выделяет текст и не позволяет пользователю вводить текст. Если я щелкну где-нибудь в поле ввода, где нет текста метки, похоже, что он работает нормально. Если я проверяю поле ввода и изменяю идентификатор полей ввода и соответствующую метку «для» значения атрибута, он связывает их.

/* Every row containing the input tag and label is relative */

table.inputTypeName td.form-row {
  position: relative;
}


/* This is the stylesheet for the label field */

table.inputTypeName label.form-label {
  position: absolute;
  top: 7px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
}


/* Labels shold float above the input box on input:focus event */

table.inputTypeName input.form-textbox:focus~label.form-label {
  top: -1.5em;
  left: 0;
  font-size: .8em;
  color: inherit;
  cursor: pointer;
}

<!--td contains the input box and it's associated label field-->
<table class="inputTypeName">
  <td class="form-row">
    <input type="text" id="the-input" class="form-textbox" ng-model="TypeName" />
    <label for="the-input" class="form-label">Your Name</label>
  </td>
</table>

Нажатие на текст метки не позволяет мне печатать в поле ввода. Щелчок в любом месте поля ввода, где отсутствует текст метки, вызывает событие input: focus.