Skip to content

Commit 86bea91

Browse files
crisbetoandrewseguin
authored andcommitted
fix(select): losing focus when selecting values through binding (#7296)
Fixes an issue that caused focus to be lost after selecting a value on a select that doesn't use Angular forms. Fixes #7092.
1 parent ce6cc0b commit 86bea91

File tree

2 files changed

+19
-2
lines changed

2 files changed

+19
-2
lines changed

src/lib/select/select.spec.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -872,6 +872,21 @@ describe('MatSelect', () => {
872872
expect(trigger.textContent).toContain('Steak, Pizza, Sandwich');
873873
});
874874

875+
it('should restore focus to the host element', () => {
876+
const fixture = TestBed.createComponent(BasicSelectWithoutForms);
877+
878+
fixture.detectChanges();
879+
fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
880+
fixture.detectChanges();
881+
882+
(overlayContainerElement.querySelector('md-option') as HTMLElement).click();
883+
fixture.detectChanges();
884+
885+
const select = fixture.debugElement.nativeElement.querySelector('md-select');
886+
887+
expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
888+
});
889+
875890
});
876891

877892
describe('disabled behavior', () => {

src/lib/select/select.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,8 +351,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
351351
@Input()
352352
get value() { return this._value; }
353353
set value(newValue: any) {
354-
this.writeValue(newValue);
355-
this._value = newValue;
354+
if (newValue !== this._value) {
355+
this.writeValue(newValue);
356+
this._value = newValue;
357+
}
356358
}
357359
private _value: any;
358360

0 commit comments

Comments
 (0)