Angular CDK Overlay Animation on overlay works only on first time

Question

I'm trying to implement a generic auto completion.

My code is structured in following way

1. dsAutocomplete directive is top level directive
2. dsAutocompleteInputTrigger is directive attached to <input> element
3. dsAutoCompleteOrigin is attached to element on whose drop down need to be anchored
4. *dsAutocompletePanel is a structural directive to define what is dropdown

Flow of actions is

For opening dsAutocompleteInputTrigger.focus -> dsAutocomplete.openPanel -> overlayRef.attach(TemplatePortal(dsAutocompletePanel)) as FlexibleConnected to dsAutoCompleteOrigin

For closing dsAutocompleteInputTrigger.focusout -> dsAutocomplete.closePanel -> overlayRef.detach()

when I add an animation directive any where in AutoComplete Panel it only works first time

The code is here https://stackblitz.com/edit/angular-ivy-smmzcq?file=src%2Fapp%2Fapp.component.html

Environment

• Angular:13.2
• CDK/Material:13.2
• Browser(s):Firefox , Chrome
• Operating System:Windows 11

Upsteam issue https://github.com/angular/components/issues/24749

Answer 1

As upstream issue https://github.com/angular/components/issues/24749 is fixed Animations work as expected