bug(mat-option in mat-autocomplete): After deleting chips, mat-autocomplete does not change position.

[Satlykov]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When remove chips, we don't have trigger for change position mat-autocomplete.

Reproduction

Steps to reproduce:

1. Visit https://material.angular.io/components/chips/examples
2. Look first example "Chips Autocomplete"
3. Select chips like on example (to have two rows).
4. When is open mat-autocomplete, delete all chips on second row for change size area of chips.

Expected Behavior

Update the position mat-autocomplete when resizing the area of chips.

Actual Behavior

After deleting chips, mat-autocomplete does not change position.

Environment

• Angular: 13
• CDK/Material: 13.2.2
• Browser(s): Google Chrome Version 107.0.5304.107 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro 19044.2251

[RobinKamps]

This issue is a side affect/related of a long discussed issue with scrolling behaviour of the autocomplete panel (e.g. #10079).
The autocomplete panel is bound to the html/body - perhaps to fix this issue in the context with chips, a click (focus) on chip/remove could just close the autocomplete panel.
And the scrolling schould be disabled for the underlying div (#26048)

[Satlykov]

@RobinKamps
I have read these issues, and they have a solution with cdkScrollable.
I hope that for the issue is a similar solution with an internal mechanism.
I thought about using methods like openPanel() or *ngIf with a custom flag, but I think it's a not well solution.
Thanks for your reply!

[RobinKamps]

@Satlykov
yes - cdkScrollable could be used as a performance breaking workaround for the scrolling issue, but it does not work on this chip remove issue, since there is no scrolling involved, if a chip remove button is clicked.

Perhaps its an option for you to add viewchild and close the autocomplete panel on chip remove.
Like:

https://stackblitz.com/edit/angular-6fg5hr?file=src%2Fapp%2Fchips-autocomplete-example.html,src%2Fapp%2Fchips-autocomplete-example.ts

Kind regards.

[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.}