Skip to content

Commit

Permalink
fix(input): floating label not reacting when patching the value witho…
Browse files Browse the repository at this point in the history
…ut emitting an event (#9260)

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes #8982.
  • Loading branch information
crisbeto authored and jelbourn committed Jan 29, 2018
1 parent d15a597 commit 4a00499
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 5 deletions.
20 changes: 19 additions & 1 deletion src/lib/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1130,6 +1130,21 @@ describe('MatInput with forms', () => {
expect(el).not.toBeNull();
expect(el.classList.contains('mat-form-field-empty')).toBe(false);
}));

it('should update when the form field value is patched without emitting', fakeAsync(() => {
const fixture = TestBed.createComponent(MatInputWithFormControl);
fixture.detectChanges();

const el = fixture.debugElement.query(By.css('label')).nativeElement;

expect(el.classList).toContain('mat-form-field-empty');

fixture.componentInstance.formControl.patchValue('value', {emitEvent: false});
fixture.detectChanges();

expect(el.classList).not.toContain('mat-form-field-empty');
}));

});

@Component({
Expand Down Expand Up @@ -1183,7 +1198,10 @@ class MatInputPlaceholderElementTestComponent {
}

@Component({
template: `<mat-form-field><input matInput [formControl]="formControl"></mat-form-field>`
template: `
<mat-form-field>
<input matInput placeholder="Hello" [formControl]="formControl">
</mat-form-field>`
})
class MatInputWithFormControl {
formControl = new FormControl();
Expand Down
9 changes: 5 additions & 4 deletions src/lib/input/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,11 +224,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
} else {
// When the input isn't used together with `@angular/forms`, we need to check manually for
// changes to the native `value` property in order to update the floating label.
this._dirtyCheckNativeValue();
}

// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
}

focus() { this._elementRef.nativeElement.focus(); }
Expand Down

0 comments on commit 4a00499

Please sign in to comment.