Topic: Cannot get focus when clicking on the grey label inside a input fields

marc parthoens free asked 3 years ago


*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>

Arkadiusz Idzikowski staff answered 3 years ago


Setting the label for attribute to be the same as the input id should solve this problem.

      <input
        mdbInput
        mdbValidate
        type="text"
        class="form-control"
        id="microchipNumber"
        formControlName="microchipNumber"
        autofocus
      />
      <label
        for="microchipNumber"
        [innerHTML]="'generic.microchipNumber' | translate"
      ></label>

marc parthoens free commented 3 years ago

Of Course. I apologize for my stupid question



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: PC
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No