Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
abdulkareemnalband opened this issue Apr 7, 2022 · 2 comments · Fixed by #24815
Closed

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

abdulkareemnalband opened this issue Apr 7, 2022 · 2 comments · Fixed by #24815
Assignees
@crisbeto
Labels
area: cdk/overlay P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@abdulkareemnalband
Copy link

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
@abdulkareemnalband abdulkareemnalband added needs triage This issue needs to be triaged by the team troubleshooting This issue is not reporting an issue, but just asking for help labels Apr 7, 2022
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 21, 2022
@crisbeto
fix(cdk/overlay): animations interrupted on repeat insertions
a34912b 
When an overlay is detached, we remove it from the change detection tree and the DOM, but we don't destroy it completely so that it can be re-attached. Re-attachment is the same process, but in reverse: we re-add the element to the DOM and the change detection tree. The problem is that we were attaching the element to the change detection tree before re-inserting it into the DOM which caused the Angular animations package not to animate the element since it's not in the DOM yet.

These changes resolve the issue by attaching the element to the DOM first.

Fixes angular#24749.
@crisbeto crisbeto mentioned this issue Apr 21, 2022
Merged
@crisbeto
Copy link
Member

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.

@crisbeto crisbeto self-assigned this Apr 21, 2022
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr area: cdk/overlay and removed troubleshooting This issue is not reporting an issue, but just asking for help needs triage This issue needs to be triaged by the team labels Apr 21, 2022
andrewseguin pushed a commit that referenced this issue Apr 22, 2022
@crisbeto
fix(cdk/overlay): animations interrupted on repeat insertions (#24815)
0faba6e 
When an overlay is detached, we remove it from the change detection tree and the DOM, but we don't destroy it completely so that it can be re-attached. Re-attachment is the same process, but in reverse: we re-add the element to the DOM and the change detection tree. The problem is that we were attaching the element to the change detection tree before re-inserting it into the DOM which caused the Angular animations package not to animate the element since it's not in the DOM yet.

These changes resolve the issue by attaching the element to the DOM first.

Fixes #24749.
andrewseguin pushed a commit that referenced this issue Apr 22, 2022
@crisbeto @andrewseguin
fix(cdk/overlay): animations interrupted on repeat insertions (#24815)
68d09dd 
When an overlay is detached, we remove it from the change detection tree and the DOM, but we don't destroy it completely so that it can be re-attached. Re-attachment is the same process, but in reverse: we re-add the element to the DOM and the change detection tree. The problem is that we were attaching the element to the change detection tree before re-inserting it into the DOM which caused the Angular animations package not to animate the element since it's not in the DOM yet.

These changes resolve the issue by attaching the element to the DOM first.

Fixes #24749.

(cherry picked from commit 0faba6e)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/overlay P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/overlay): animations interrupted on repeat insertions crisbeto/material2
2 participants
@abdulkareemnalband @crisbeto