Skip to content

Commit

Permalink
fix(autocomplete): reopen panel on input click
Browse files Browse the repository at this point in the history
Currently if the user clicks an autocomplete to open it, selects an option and then clicks again, the panel won't open, because we use `focus` and the input was focused already. These changes add an extra `click` listener so the panel can reopen.

Fixes angular#15177.
  • Loading branch information
crisbeto committed May 14, 2019
1 parent 3712b8f commit 3a9fdba
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 0 deletions.
7 changes: 7 additions & 0 deletions src/material/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
'(blur)': '_onTouched()',
'(input)': '_handleInput($event)',
'(keydown)': '_handleKeydown($event)',
'(click)': '_handleClick()',
},
exportAs: 'matAutocompleteTrigger',
providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
Expand Down Expand Up @@ -445,6 +446,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
}
}

_handleClick() {
if (!this.panelOpen) {
this.openPanel();
}
}

/**
* In "auto" mode, the label will animate down as soon as focus is lost.
* This causes the value to jump when selecting an option with the mouse.
Expand Down
23 changes: 23 additions & 0 deletions src/material/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,29 @@ describe('MatAutocomplete', () => {
expect(input.getAttribute('aria-haspopup')).toBe('false');
});

it('should close the panel when pressing escape', fakeAsync(() => {
const trigger = fixture.componentInstance.trigger;

input.focus();
flush();
fixture.detectChanges();

expect(document.activeElement).toBe(input, 'Expected input to be focused.');
expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');

trigger.closePanel();
fixture.detectChanges();

expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');

input.click();
flush();
fixture.detectChanges();

expect(trigger.panelOpen).toBe(true, 'Expected panel to reopen on click.');
}));

});

it('should have the correct text direction in RTL', () => {
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/material/autocomplete.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, OnC
readonly panelOpen: boolean;
position: 'auto' | 'above' | 'below';
constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler?: ViewportRuler | undefined);
_handleClick(): void;
_handleFocus(): void;
_handleInput(event: KeyboardEvent): void;
_handleKeydown(event: KeyboardEvent): void;
Expand Down

0 comments on commit 3a9fdba

Please sign in to comment.