Topic: 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());
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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
idandforattributes 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
form1toform2,form3etc. for subsequent inputs): https://mdbootstrap.com/docs/angular/forms/inputs/#outline-inputsThe 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.