Pass destinationElement to basic-dropdown (#1863)

ember-basic-dropdown accepts `destinationElement` argument and
power-select should to support it as well.

ember-power-select/src/components/power-select-multiple.hbs

@@ -19,6 +19,7 @@
   @highlightOnHover={{@highlightOnHover}}
   @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}
   @destination={{@destination}}
+  @destinationElement={{@destinationElement}}
   @disabled={{@disabled}}
   @dropdownClass={{@dropdownClass}}
   @extra={{@extra}}

ember-power-select/src/components/power-select.hbs

@@ -16,6 +16,7 @@
 {{/if}}
 <BasicDropdown
   @horizontalPosition={{@horizontalPosition}}
+  @destinationElement={{@destinationElement}}
   @destination={{@destination}}
   @initiallyOpened={{@initiallyOpened}}
   @matchTriggerWidth={{this.matchTriggerWidth}}

ember-power-select/src/components/power-select.ts

@@ -72,6 +72,7 @@ export interface PowerSelectArgs {
   options?: readonly any[] | Promise<readonly any[]>;
   selected?: any | PromiseProxy<any>;
   destination?: string;
+  destinationElement?: HTMLElement;
   closeOnSelect?: boolean;
   renderInPlace?: boolean;
   preventScroll?: boolean;

test-app/tests/integration/components/power-select/general-behaviour-test.js

@@ -22,6 +22,7 @@ import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 import ArrayProxy from '@ember/array/proxy';
 import ObjectProxy from '@ember/object/proxy';
 import { TrackedArray } from 'tracked-built-ins';
+import { modifier } from 'ember-modifier';
 
 const PromiseArrayProxy = ArrayProxy.extend(PromiseProxyMixin);
 const PromiseObject = ObjectProxy.extend(PromiseProxyMixin);
@@ -1385,6 +1386,30 @@ module(
         .exists('Dropdown is rendered inside the destination element');
     });
 
+    test('The destination where the content is rendered can be customized by passing a `destinationElement=element`', async function (assert) {
+      assert.expect(2);
+
+      this.numbers = numbers;
+      this.ref = modifier((element) => {
+        this.set('destinationElement', element);
+      });
+      await render(hbs`
+      <PowerSelect @options={{this.numbers}} @onChange={{fn (mut this.foo)}} @destinationElement={{this.destinationElement}} as |option|>
+        {{option}}
+      </PowerSelect>
+      <div class="alternative-destination" {{this.ref}}></div>
+    `);
+
+      assert
+        .dom('.ember-power-select-dropdown')
+        .doesNotExist('Dropdown is not rendered');
+
+      await clickTrigger();
+      assert
+        .dom('.alternative-destination .ember-power-select-dropdown')
+        .exists('Dropdown is rendered inside the destination element');
+    });
+
     test('[BUGFIX] When the component is open and it has a `search` action, if options get updated the highlighted items is reset', async function (assert) {
       assert.expect(2);