Angular Outline Text Input Responds Slowly with Label Click


Topic: Angular Outline Text Input Responds Slowly with Label Click

Zachary Bell pro premium priority asked 4 years ago

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());
  }
}

Arkadiusz Idzikowski staff commented 4 years ago

@Zachary Bell We could not reproduce this problem on our end. It looks like there is something wrong with the id and for attributes of the inputs and labels because when you click on the label of the third input, the label of the second input is updated.

Please try to update the attributes so that every input and label has unique id/for.


Zachary Bell pro premium priority commented 4 years ago

So that is not it in this case we checked the ids and fors and they correct. Also if you look at the gif closely you see when the click happens via the yellow circle that appears. The previous input is responding before the next one is clicked, It just a very slow response. Also the inputs clicked outside of the label open right after the click happens, without delay.

Is there any code you recommend we look at or post here that could cause something like this to happen?


Arkadiusz Idzikowski staff commented 4 years ago

@Zachary Bell Please try to test that on simple example from our documentation (change id/for attributes from form1 to form2 , form3 etc. for subsequent inputs): https://mdbootstrap.com/docs/angular/forms/inputs/#outline-inputs

The behavior on the gif is strange because clicked label should be animated and in this case label on which you click is not activated.


Zachary Bell pro premium priority commented 4 years ago

Okay, we were able to resolve this.

Short of the long, we were iterating in an ngFor from a method return. It was causing a digest/change detection loop and continuously calling into the function even after it had returned and rendered the results. We fixed this by evaluating the result from the function and setting it to a property on the object so that the template did not have to call back to a function.


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: desktop
  • Browser: All
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes