fix(autocomplete): reopening when clicking an option in IE (#5172)

Fixes an issue that caused IE to reopen the autocomplete panel if the user clicks to select an item. It seems that IE can delay refocusing the input after the panel has been closed, which causes the focus handler to reopen it. Fixes #5165.
angular · Jun 22, 2017 · fe31210 · fe31210
1 parent bdf0286
commit fe31210
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -64,13 +64,13 @@ export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
  */
 export function getMdAutocompleteMissingPanelError(): Error {
   return Error('Attempting to open an undefined instance of `md-autocomplete`. ' +
-                   'Make sure that the id passed to the `mdAutocomplete` is correct and that ' +
-                   'you\'re attempting to open it after the ngAfterContentInit hook.');
+               'Make sure that the id passed to the `mdAutocomplete` is correct and that ' +
+               'you\'re attempting to open it after the ngAfterContentInit hook.');
 }
 
 @Directive({
   selector: 'input[mdAutocomplete], input[matAutocomplete],' +
-  'textarea[mdAutocomplete], textarea[matAutocomplete]',
+            'textarea[mdAutocomplete], textarea[matAutocomplete]',
   host: {
     'role': 'combobox',
     'autocomplete': 'off',
@@ -79,7 +79,9 @@ export function getMdAutocompleteMissingPanelError(): Error {
     '[attr.aria-activedescendant]': 'activeOption?.id',
     '[attr.aria-expanded]': 'panelOpen.toString()',
     '[attr.aria-owns]': 'autocomplete?.id',
-    '(focus)': 'openPanel()',
+    // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
+    // a little earlier. This avoids issues where IE delays the focusing of the input.
+    '(focusin)': 'openPanel()',
     '(input)': '_handleInput($event)',
     '(blur)': '_onTouched()',
     '(keydown)': '_handleKeydown($event)',

diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
@@ -101,7 +101,7 @@ describe('MdAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected panel state to start out closed.`);
 
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
       fixture.whenStable().then(() => {
         fixture.detectChanges();
 
@@ -147,7 +147,7 @@ describe('MdAutocomplete', () => {
       }));
 
     it('should close the panel when input loses focus', async(() => {
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -161,7 +161,7 @@ describe('MdAutocomplete', () => {
     }));
 
     it('should close the panel when an option is clicked', async(() => {
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -177,7 +177,7 @@ describe('MdAutocomplete', () => {
     }));
 
     it('should close the panel when a newly created option is clicked', async(() => {
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -222,7 +222,7 @@ describe('MdAutocomplete', () => {
     });
 
     it('should hide the panel when the options list is empty', async(() => {
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
 
       fixture.whenStable().then(() => {
         fixture.detectChanges();
@@ -1127,7 +1127,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const input = fixture.debugElement.query(By.css('input')).nativeElement;
-      dispatchFakeEvent(input, 'focus');
+      dispatchFakeEvent(input, 'focusin');
 
       fixture.whenStable().then(() => {
         fixture.detectChanges();
@@ -1226,7 +1226,7 @@ describe('MdAutocomplete', () => {
       let fixture = TestBed.createComponent(AutocompleteWithOnPushDelay);
 
       fixture.detectChanges();
-      dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focus');
+      dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focusin');
       tick(1000);
       fixture.detectChanges();