help(Overlay): Animation works only on first attachment ,

[abdulkareemnalband]

What are you trying to do?

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

What troubleshooting steps have you tried?

Tried adding attach and detach in zone.run

Reproduction

follow instruction in following stackblitz
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 (e.g. Windows, macOS, Ubuntu):Windows 11

[crisbeto]

There are a couple of problems with your example:

1. The animation is using :enter which only fires when the element is inserted for the first time. Since detach only removes it from the DOM and the change detection tree, re-attaching it isn't going to trigger the animation.
2. We have a bug where the animation is going to be interrupted on repeat attachments. I have a fix out for it in fix(cdk/overlay): animations interrupted on repeat insertions #24815.

There are a couple of ways to work around it:

1. Use dispose instead of detach and recreate the overlay every time it is opened.
2. Wait for the fix from fix(cdk/overlay): animations interrupted on repeat insertions #24815 to be merged and change the animation so that the animation state is based on a property you control, rather than :enter.

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