diff --git a/src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts b/src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts index 97f9a89eb8f5..4c2196b28c5b 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts +++ b/src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts @@ -41,6 +41,7 @@ export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = { '(blur)': '_onTouched()', '(input)': '_handleInput($event)', '(keydown)': '_handleKeydown($event)', + '(click)': '_handleClick()', }, exportAs: 'matAutocompleteTrigger', providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts index 3f111ab66994..9e1ce349b6f5 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts +++ b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts @@ -569,6 +569,31 @@ describe('MDC-based MatAutocomplete', () => { expect(input.hasAttribute('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).withContext('Expected input to be focused.').toBe(input); + expect(trigger.panelOpen).withContext('Expected panel to be open.').toBe(true); + + trigger.closePanel(); + fixture.detectChanges(); + + expect(document.activeElement) + .withContext('Expected input to continue to be focused.') + .toBe(input); + expect(trigger.panelOpen).withContext('Expected panel to be closed.').toBe(false); + + input.click(); + flush(); + fixture.detectChanges(); + + expect(trigger.panelOpen).withContext('Expected panel to reopen on click.').toBe(true); + })); }); it('should not close the panel when clicking on the input', fakeAsync(() => { diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index 059665bdaea7..b328223f0545 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -454,6 +454,12 @@ export abstract class _MatAutocompleteTriggerBase } } + _handleClick(): void { + if (this._canOpen() && !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. @@ -800,6 +806,7 @@ export abstract class _MatAutocompleteTriggerBase '(blur)': '_onTouched()', '(input)': '_handleInput($event)', '(keydown)': '_handleKeydown($event)', + '(click)': '_handleClick()', }, exportAs: 'matAutocompleteTrigger', providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index ef3b1f562948..8394f30a8893 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/src/material/autocomplete/autocomplete.spec.ts @@ -566,6 +566,31 @@ describe('MatAutocomplete', () => { expect(input.hasAttribute('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).withContext('Expected input to be focused.').toBe(input); + expect(trigger.panelOpen).withContext('Expected panel to be open.').toBe(true); + + trigger.closePanel(); + fixture.detectChanges(); + + expect(document.activeElement) + .withContext('Expected input to continue to be focused.') + .toBe(input); + expect(trigger.panelOpen).withContext('Expected panel to be closed.').toBe(false); + + input.click(); + flush(); + fixture.detectChanges(); + + expect(trigger.panelOpen).withContext('Expected panel to reopen on click.').toBe(true); + })); }); it('should not close the panel when clicking on the input', fakeAsync(() => { diff --git a/tools/public_api_guard/material/autocomplete.md b/tools/public_api_guard/material/autocomplete.md index 6cc0d76a28c4..1a656ca79d62 100644 --- a/tools/public_api_guard/material/autocomplete.md +++ b/tools/public_api_guard/material/autocomplete.md @@ -198,6 +198,8 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso closePanel(): void; connectedTo: _MatAutocompleteOriginBase; // (undocumented) + _handleClick(): void; + // (undocumented) _handleFocus(): void; // (undocumented) _handleInput(event: KeyboardEvent): void;