Skip to content

Commit

Permalink
fix(forms): remove touched enforcement
Browse files Browse the repository at this point in the history
This was a bug fix for old issue with input type=number that is not reproducible anymore.
It causes extra valueChanged events on blur after upgrade to Angular v14.

closes #337

Signed-off-by: Ivan Donchev <idonchev@vmware.com>
  • Loading branch information
Jinnie committed Oct 31, 2022
1 parent 89858ae commit cb32ff2
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 11 deletions.
6 changes: 3 additions & 3 deletions projects/angular/src/forms/common/wrapped-control.spec.ts
Expand Up @@ -352,14 +352,14 @@ export default function (): void {
expect(this.input.getAttribute('aria-describedby')).toBe(null);
});

it('adds the aria-describedby for error messages', function (this: TestContext) {
it('adds the aria-describedby for error messages', fakeAsync(function (this: TestContext) {
setupTest(this, WithControlAndError, TestControl3);
this.input.focus();
this.input.blur();
this.fixture.detectChanges();

tick();
expect(this.input.getAttribute('aria-describedby')).toContain('-error');
});
}));

it('does not set aria-describedby unless error helper is present', function () {
setupTest(this, WithControl, TestControl3);
Expand Down
7 changes: 0 additions & 7 deletions projects/angular/src/forms/common/wrapped-control.ts
Expand Up @@ -103,13 +103,6 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, OnD
@HostListener('blur')
triggerValidation() {
if (this.ifControlStateService) {
/**
* For some reason the <input type="number" /> on blur ngControl doesn't set the control to 'touched'
* This one is a workaround to provide the control to be 'touched' on blur and fix #4480.
*/
if (this.ngControl && !this.ngControl.touched) {
this.markAsTouched();
}
this.ifControlStateService.triggerStatusChange();
}
}
Expand Down
46 changes: 45 additions & 1 deletion projects/angular/src/forms/input/input.spec.ts
Expand Up @@ -5,8 +5,11 @@
*/

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TestBed } from '@angular/core/testing';
import { FormControl, FormGroup, FormsModule, NgControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { By } from '@angular/platform-browser';

import { ClrCommonFormsModule } from '../common';
import { ControlStandaloneSpec, ReactiveSpec, TemplateDrivenSpec } from '../tests/control.spec';
import { ClrInput } from './input';
import { ClrInputContainer } from './input-container';
Expand Down Expand Up @@ -39,5 +42,46 @@ export default function (): void {
ControlStandaloneSpec(StandaloneUseTest);
TemplateDrivenSpec(ClrInputContainer, ClrInput, TemplateDrivenTest, 'clr-input');
ReactiveSpec(ClrInputContainer, ClrInput, ReactiveTest, 'clr-input');
inputSpec('tempate-driven', ClrInputContainer, ClrInput, TemplateDrivenTest);
inputSpec('reactive', ClrInputContainer, ClrInput, ReactiveTest);
});
}

function inputSpec(description, testContainer, testControl, testComponent) {
describe('Input specific value change tests ' + description, () => {
let control, fixture;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [FormsModule, ClrCommonFormsModule, ReactiveFormsModule],
declarations: [testContainer, testControl, testComponent],
});
fixture = TestBed.createComponent(testComponent);
control = fixture.debugElement.query(By.directive(testControl));
fixture.detectChanges();
});

it('should handle valueChanges calls', () => {
// control must be both invalid and blurred to register the validity
let valueChanges = 0;
control.injector.get(NgControl).control.valueChanges.subscribe(() => {
valueChanges++;
});

// make sure blur alone does not trigger valueChanges
control.nativeElement.dispatchEvent(new Event('focus'));
control.nativeElement.dispatchEvent(new Event('blur'));
fixture.detectChanges();
expect(valueChanges).toBe(0);

// now make sure input change triggers valueChanges
control.nativeElement.dispatchEvent(new Event('focus'));
control.nativeElement.value = 'abc';

control.nativeElement.dispatchEvent(new Event('input'));
control.nativeElement.dispatchEvent(new Event('blur'));
fixture.detectChanges();
expect(valueChanges).toBe(1);
});
});
}

0 comments on commit cb32ff2

Please sign in to comment.