Make sure the content parent element is set before animating out

[gwak]

This is a follow-up to the PRs #623 and #628. The fix on the animation flow worked well when the dropdown is rendered in place. Not so well when not because the parent element is lost when the content element is closed.

In the animateOut function, there's an early exit when no dropdownElement.parentElement is null. So before the check I just try to get the parentElement through the destinationElement.

[gwak]

Hello, how can I help to make this PR merged.

[cibernox]

Sorry, I missed this PR completely

[cibernox]

Merged! I'm going to cut a new release.

[cibernox]

4.0.3 contains this change. Thanks again 🙏

[gwak]

@cibernox Thank you!

[erichaus]

this is causing a weird double animate out in my app

[gwak]

Hello, thanks for the feedback @hoIIer, I can have a look, but could you please be more specific on your context, like:

• Browser + OS (Does the animation on the docs behaves normally on your browser ?)
• Animation css you're using
• renderInPlace or not
• ...

[cibernox]

@hoIIer Also interested, It didn't cause any problem on mine.

[erichaus]

• happens in both chrome/firefox latest in osx
• using custom calculated position that sets css animation dynamically
• not using renderInPlace

e.g. output of this.calcPosition

animation: "popoutFadeInSlideLeft 0.1s ease-in-out"
right: 709.5
top: 433.1796875

  @keyframes popoutFadeInSlideLeft {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }

When I remove the style.animation = ... the popout looks normal

<BasicDropdown
  @calculatePosition={{this.calcPosition}}
  as |dd|
>
  {{yield (hash
    dd=dd
    trigger=(
      component 'popout-menu/trigger'
      componentStyle=(get-style this)
      disableMenu=@disableMenu
      dropdown=dd
      name=@name
      visible=@visible
    )
    menu=(
      component 'popout-menu/menu'
      componentStyle=(get-style this)
      dropdown=dd
      onClickOverlay=this.onClickOverlay
      theme=@theme
    )
    componentStyle=(get-style this)
  )}}
</BasicDropdown>

[erichaus]

I extended the animation duration to 10 seconds and noticed when closing the dropdown, the content menu is immediately reset to it's starting position, but it still has the animation value set so it does a 2nd animation in before closing.

Tried unsetting it with --transitioning-out but it seemed to have no effect.

[erichaus]

Confirmed that in 4.0.2 the content menu does not reset to original position after clicking out to close the dropdown, the <div id="ember-basic-dropdown-wormhole"></div> just becomes empty again.

In 4.0.3 when clicking out to close the dropdown, the content menu appears again inside the parent container and with a --clone css class, leading to the 2nd animation before it's removed entirely.

[erichaus]

Can revisit later today, perhaps I need to adjust how I'm setting the animation? In this case I have to set it dynamically within the calcPosition function because my contextual dropdown is used in different contexts.