bug(autocomplete): Clicks within custom wrapper/origin should not close the panel

[adzhiljano]

Overview

When attaching the autocomplete panel to a different element, clicks within this element should be considered "inside" clicks, not "outside" clicks. And "outside" clicks automatically close the panel. If you wrap the autocomplete inside a mat-form-field (Example 4), it works as expected. Btw I might not be right, that's just my 2 cents.

Reproduction

there are 4 examples in this repro, Example 1 shows the problem.

https://stackblitz.com/edit/angular-srkvkh?file=src%2Fapp%2Fautocomplete-simple-example.html

Steps to reproduce:

1. Click on the arrow_drop_down icon next to the Example 1 input

Expected Behavior

The panel should open

Actual Behavior

The panel did not open (actually it opens, but is closed almost immediately)

Environment

• Angular: 10.0.0
• CDK/Material: 10.0.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 8

Suggested Fix

As shown in the repro link, event.stopPropagation() (Examples 2 & 3) fixes the issue, but it won't work after #17381 is merged. And even that it works, if you have two controls (autocomplete) on the same page, clicking the arrow_drop_down one after the other on both of them will open both panels.

The following condition should respect the custom origin as well:

components/src/material/autocomplete/autocomplete-trigger.ts

Lines 364 to 366 in 286fd99

	return this._overlayAttached && clickTarget !== this._element.nativeElement &&
	(!formField || !formField.contains(clickTarget)) &&
	(!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));

Something like:

const origin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;

return this._overlayAttached && clickTarget !== this._element.nativeElement && 
	(!formField || !formField.contains(clickTarget)) && 
	(!origin || !origin.contains(clickTarget)) &&
	(!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget)); 	 

I can make a PR, but tell me what you think about this. Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}