Fixed state not being reset to correct value when transitioning out

CHANGELOG.md

@@ -1,4 +1,9 @@
-# 4.0.0 
+# 4.0.1
+
+- (#628) Fix issue, The `@animationClass` class don't get reset after the first render.
+  When the dropdown content first renders, it animates correctly, but on subsequent renders there is no animation -
+  cause `@animationClass` not being reset back to transitioning--in state.
+# 4.0.0
 
 - (#633) A11y improvements, changing aria-controls instead of aria-owns, which seems to be more correct.
 - [BREAKING] Stop using a polyfill for `Object.assign`, which effectively removes support for Internet Exporer. But it's 2022, its about time.

addon/components/basic-dropdown-content.ts

@@ -54,9 +54,7 @@ export default class BasicDropdownContent extends Component<Args> {
   private handleRootMouseDown?: RootMouseDownHandler;
   private scrollableAncestors: Element[] = [];
   private mutationObserver?: MutationObserver;
-  @tracked animationClass = this.animationEnabled
-    ? this.transitioningInClass
-    : '';
+  @tracked animationClass = this.transitioningInClass
 
   get destinationElement(): Element | null {
     return document.getElementById(this.args.destination);
@@ -162,8 +160,8 @@ export default class BasicDropdownContent extends Component<Args> {
     clone.classList.remove(...this.transitioningInClass.split(' '));
     clone.classList.add(...this.transitioningOutClass.split(' '));
     parentElement.appendChild(clone);
-    this.animationClass = this.transitionedInClass;
-    waitForAnimations(clone, function () {
+    this.animationClass = this.transitioningInClass;
+    waitForAnimations(clone, function() {
       (parentElement as HTMLElement).removeChild(clone);
     });
   }

tests/integration/components/basic-dropdown-test.js

@@ -3,7 +3,14 @@ import { registerDeprecationHandler } from '@ember/debug';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { hbs } from 'ember-cli-htmlbars';
-import { render, click, focus, triggerEvent } from '@ember/test-helpers';
+import {
+  render,
+  click,
+  focus,
+  triggerEvent,
+  waitUntil,
+  find,
+} from '@ember/test-helpers';
 
 let deprecations = [];
 
@@ -1029,4 +1036,84 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       .dom('.ember-basic-dropdown-content')
       .hasAttribute('style', /max-height: 500px; overflow-y: auto/);
   });
+
+  /**
+   * Tests related to https://github.com/cibernox/ember-basic-dropdown/issues/615
+   * Just in case animationEnabled on TEST ENV, this test would cover this change
+   */
+
+  test.skip('[BUGFIX] Dropdowns rendered in place have correct animation flow', async function (assert) {
+    assert.expect(4);
+
+    const basicDropdownContentClass = 'ember-basic-dropdown-content';
+    const transitioningInClass = 'ember-basic-dropdown--transitioning-in';
+    const transitionedInClass = 'ember-basic-dropdown--transitioned-in';
+    const transitioningOutClass = 'ember-basic-dropdown--transitioning-out';
+
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      `<style>
+          @keyframes grow-out{0%{opacity: 0;transform: scale(0);}100%{opacity: 1;transform: scale(1);}}
+          @keyframes drop-fade-below {0%{opacity:0;transform: translateY(-5px);}100%{opacity: 1;transform: translateY(0);}}
+          .ember-basic-dropdown--transitioning-in{animation: grow-out 1s ease-out;}
+          .ember-basic-dropdown--transitioning-out{animation: drop-fade-below 1s reverse;}
+        </style>
+        `
+    );
+
+    await render(hbs`
+       <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+         <dropdown.Trigger><button>Open me</button></dropdown.Trigger>
+         <dropdown.Content><div id="dropdown-is-opened">CONTENT</div></dropdown.Content>
+       </BasicDropdown>
+     `);
+
+    await click('.ember-basic-dropdown-trigger');
+
+    assert
+      .dom(`.${basicDropdownContentClass}`)
+      .hasClass(
+        transitioningInClass,
+        `The dropdown content has .${transitioningInClass} class`
+      );
+
+    await waitUntil(() =>
+      find('.ember-basic-dropdown-content').classList.contains(
+        transitionedInClass
+      )
+    );
+
+    await click('.ember-basic-dropdown-trigger');
+
+    assert
+      .dom(`.${basicDropdownContentClass}`)
+      .hasClass(
+        transitioningOutClass,
+        `The dropdown content has .${transitioningOutClass} class`
+      );
+
+    await click('.ember-basic-dropdown-trigger');
+
+    assert
+      .dom(`.${basicDropdownContentClass}`)
+      .hasClass(
+        transitioningInClass,
+        `After closing dropdown, the dropdown content has .${transitioningInClass} class again as initial value`
+      );
+
+    await waitUntil(() =>
+      find('.ember-basic-dropdown-content').classList.contains(
+        transitionedInClass
+      )
+    );
+
+    await click('.ember-basic-dropdown-trigger');
+
+    assert
+      .dom(`.${basicDropdownContentClass}`)
+      .hasClass(
+        transitioningOutClass,
+        `The dropdown content has .${transitioningOutClass} class`
+      );
+  });
 });