diff --git a/CHANGELOG.md b/CHANGELOG.md index b94ce41e..f32e520d 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/addon/components/basic-dropdown-content.ts b/addon/components/basic-dropdown-content.ts index ab2fd044..32e4599d 100644 --- a/addon/components/basic-dropdown-content.ts +++ b/addon/components/basic-dropdown-content.ts @@ -54,9 +54,7 @@ export default class BasicDropdownContent extends Component { 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 { 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); }); } diff --git a/tests/integration/components/basic-dropdown-test.js b/tests/integration/components/basic-dropdown-test.js index 684ce64f..d52e7f42 100644 --- a/tests/integration/components/basic-dropdown-test.js +++ b/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', + ` + ` + ); + + await render(hbs` + + + + + `); + + 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` + ); + }); });