Skip to content

Commit 7f79de5

Browse files
committed
fix(autocomplete): reopen panel on input click
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 #15177.
1 parent 492fdcc commit 7f79de5

File tree

2 files changed

+28
-2
lines changed

2 files changed

+28
-2
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
119119
'(blur)': '_onTouched()',
120120
'(input)': '_handleInput($event)',
121121
'(keydown)': '_handleKeydown($event)',
122+
'(click)': 'openPanel()',
122123
},
123124
exportAs: 'matAutocompleteTrigger',
124125
providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
@@ -270,8 +271,10 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
270271

271272
/** Opens the autocomplete suggestion panel. */
272273
openPanel(): void {
273-
this._attachOverlay();
274-
this._floatLabel();
274+
if (!this.panelOpen) {
275+
this._attachOverlay();
276+
this._floatLabel();
277+
}
275278
}
276279

277280
/** Closes the autocomplete suggestion panel. */

src/material/autocomplete/autocomplete.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,29 @@ describe('MatAutocomplete', () => {
516516
expect(input.getAttribute('aria-haspopup')).toBe('false');
517517
});
518518

519+
it('should close the panel when pressing escape', fakeAsync(() => {
520+
const trigger = fixture.componentInstance.trigger;
521+
522+
input.focus();
523+
flush();
524+
fixture.detectChanges();
525+
526+
expect(document.activeElement).toBe(input, 'Expected input to be focused.');
527+
expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
528+
529+
trigger.closePanel();
530+
fixture.detectChanges();
531+
532+
expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
533+
expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
534+
535+
input.click();
536+
flush();
537+
fixture.detectChanges();
538+
539+
expect(trigger.panelOpen).toBe(true, 'Expected panel to reopen on click.');
540+
}));
541+
519542
});
520543

521544
it('should not close the panel when clicking on the input', fakeAsync(() => {

0 commit comments

Comments
 (0)