Skip to content

Commit

Permalink
fix(input): don't highlight container when readonly input is focused (#…
Browse files Browse the repository at this point in the history
…5776)

Fixes #5749.
  • Loading branch information
crisbeto authored and kara committed Jul 20, 2017
1 parent 643023d commit 349121d
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 1 deletion.
43 changes: 43 additions & 0 deletions src/lib/input/input-container.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ describe('MdInputContainer without forms', function () {
MdTextareaWithBindings,
MdInputContainerWithNgIf,
MdInputContainerOnPush,
MdInputContainerWithReadonlyInput,
],
});

Expand Down Expand Up @@ -604,6 +605,39 @@ describe('MdInputContainer without forms', function () {

expect(placeholder.classList).not.toContain('mat-empty', 'Input no longer empty');
});

it('should set the focused class when the input is focused', () => {
let fixture = TestBed.createComponent(MdInputContainerTextTestController);
fixture.detectChanges();

let input = fixture.debugElement.query(By.directive(MdInputDirective))
.injector.get<MdInputDirective>(MdInputDirective);
let container = fixture.debugElement.query(By.css('md-input-container')).nativeElement;

// Call the focus handler directly to avoid flakyness where
// browsers don't focus elements if the window is minimized.
input._onFocus();
fixture.detectChanges();

expect(container.classList).toContain('mat-focused');
});

it('should not highlight when focusing a readonly input', () => {
let fixture = TestBed.createComponent(MdInputContainerWithReadonlyInput);
fixture.detectChanges();

let input = fixture.debugElement.query(By.directive(MdInputDirective))
.injector.get<MdInputDirective>(MdInputDirective);
let container = fixture.debugElement.query(By.css('md-input-container')).nativeElement;

// Call the focus handler directly to avoid flakyness where
// browsers don't focus elements if the window is minimized.
input._onFocus();
fixture.detectChanges();

expect(input.focused).toBe(false);
expect(container.classList).not.toContain('mat-focused');
});
});

describe('MdInputContainer with forms', () => {
Expand Down Expand Up @@ -1230,3 +1264,12 @@ class MdInputContainerWithNgIf {
class MdInputContainerOnPush {
formControl = new FormControl('');
}

@Component({
template: `
<md-input-container>
<input mdInput readonly value="Only for reading">
</md-input-container>
`
})
class MdInputContainerWithReadonlyInput {}
12 changes: 11 additions & 1 deletion src/lib/input/input-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export class MdInputDirective {
private _placeholder: string = '';
private _disabled = false;
private _required = false;
private _readonly = false;
private _id: string;
private _cachedUid: string;
private _errorOptions: ErrorOptions;
Expand Down Expand Up @@ -196,6 +197,11 @@ export class MdInputDirective {
}
}

/** Whether the element is readonly. */
@Input()
get readonly() { return this._readonly; }
set readonly(value: any) { this._readonly = coerceBooleanProperty(value); }

/** A function used to control when error messages are shown. */
@Input() errorStateMatcher: ErrorStateMatcher;

Expand Down Expand Up @@ -247,7 +253,11 @@ export class MdInputDirective {
/** Focuses the input element. */
focus() { this._elementRef.nativeElement.focus(); }

_onFocus() { this.focused = true; }
_onFocus() {
if (!this._readonly) {
this.focused = true;
}
}

_onBlur() { this.focused = false; }

Expand Down

0 comments on commit 349121d

Please sign in to comment.