Skip to content

Commit eecf897

Browse files
crisbetotinayuangao
authored andcommitted
fix(autocomplete): restore focus to input when click on option (#4702)
Restores focus to the autocomplete input when an option is clicked, instead of dumping it into the body. Fixes #4645.
1 parent b5b762a commit eecf897

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
339339
this._clearPreviousSelectedOption(event.source);
340340
this._setTriggerValue(event.source.value);
341341
this._onChange(event.source.value);
342+
this._element.nativeElement.focus();
342343
}
343344

344345
this.closePanel();

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -878,6 +878,22 @@ describe('MdAutocomplete', () => {
878878

879879
});
880880

881+
it('should restore focus to the input when clicking to select a value', async(() => {
882+
fixture.componentInstance.trigger.openPanel();
883+
fixture.detectChanges();
884+
885+
fixture.whenStable().then(() => {
886+
const option = overlayContainerElement.querySelector('md-option') as HTMLElement;
887+
888+
// Focus the option manually since the synthetic click may not do it.
889+
option.focus();
890+
option.click();
891+
fixture.detectChanges();
892+
893+
expect(document.activeElement).toBe(input, 'Expected focus to be restored to the input.');
894+
});
895+
}));
896+
881897
});
882898

883899
describe('Fallback positions', () => {

0 commit comments

Comments
 (0)