From 7648f720207e7f23d5a53b1fa7bc4022484babe8 Mon Sep 17 00:00:00 2001
From: Andrew Kirwin <github@andrewkirwin.co.uk>
Date: Fri, 17 Jan 2025 14:08:41 +0000
Subject: [PATCH] add dropdown content destination argument

---
 README.md                                     |  4 +++
 addon/components/dropdown/content.gjs         | 28 +++++++++++++------
 addon/components/dropdown/index.gjs           |  1 +
 .../dropdown/index/in-element-test.gjs        | 10 +++----
 .../select-box/index/in-element-test.gjs      | 16 ++++-------
 5 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 86103198..65c7ccb9 100644
--- a/README.md
+++ b/README.md
@@ -242,6 +242,10 @@ A combobox, which toggles the select box's dropdown open/closed.
 
 An element to house the content that displays when the select box's dropdown is opened
 
+#### `@destination`
+
+Optional. Wormhole/Portal element
+
 ## `Dropdown`
 
 ### Arguments
diff --git a/addon/components/dropdown/content.gjs b/addon/components/dropdown/content.gjs
index ee00beb5..203aaf0b 100644
--- a/addon/components/dropdown/content.gjs
+++ b/addon/components/dropdown/content.gjs
@@ -1,13 +1,25 @@
 import lifecycle from '@zestia/ember-select-box/modifiers/lifecycle';
 
+const Destination = <template>
+  {{#if @destination}}
+    {{#in-element @destination insertBefore=null}}
+      {{yield}}
+    {{/in-element}}
+  {{else}}
+    {{yield}}
+  {{/if}}
+</template>;
+
 <template>
   {{! template-lint-disable no-positive-tabindex }}
-  <div
-    class="dropdown__content"
-    tabindex={{@tabindex}}
-    {{lifecycle onInsert=@onInsert onDestroy=@onDestroy}}
-    ...attributes
-  >
-    {{yield}}
-  </div>
+  <Destination @destination={{@destination}}>
+    <div
+      class="dropdown__content"
+      tabindex={{@tabindex}}
+      {{lifecycle onInsert=@onInsert onDestroy=@onDestroy}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </Destination>
 </template>
diff --git a/addon/components/dropdown/index.gjs b/addon/components/dropdown/index.gjs
index fc59ac16..8ee5b194 100644
--- a/addon/components/dropdown/index.gjs
+++ b/addon/components/dropdown/index.gjs
@@ -258,6 +258,7 @@ export default class Dropdown extends Component {
         )
         Content=(component
           DropdownContent
+          destination=this.element
           onFocusOut=this.handleFocusOutContent
           onMouseDown=this.handleMouseDownContent
           onInsert=this.handleInsertContent
diff --git a/tests/integration/components/dropdown/index/in-element-test.gjs b/tests/integration/components/dropdown/index/in-element-test.gjs
index c5ab7bb6..5f24f939 100644
--- a/tests/integration/components/dropdown/index/in-element-test.gjs
+++ b/tests/integration/components/dropdown/index/in-element-test.gjs
@@ -17,12 +17,10 @@ module('dropdown (in-element)', function (hooks) {
           Trigger
         </dd.Trigger>
         {{#if dd.isOpen}}
-          {{#in-element (destination) insertBefore=null}}
-            <dd.Content>
-              Hello World
-              <button type="button" class="test" />
-            </dd.Content>
-          {{/in-element}}
+          <dd.Content @destination={{(destination)}}>
+            Hello World
+            <button type="button" class="test" />
+          </dd.Content>
         {{/if}}
       </Dropdown>
 
diff --git a/tests/integration/components/select-box/index/in-element-test.gjs b/tests/integration/components/select-box/index/in-element-test.gjs
index 55038477..69aa0d12 100644
--- a/tests/integration/components/select-box/index/in-element-test.gjs
+++ b/tests/integration/components/select-box/index/in-element-test.gjs
@@ -17,16 +17,12 @@ module('select-box (in-element)', function (hooks) {
           <sb.Trigger>
             {{sb.value}}
           </sb.Trigger>
-          {{#if dd.isOpen}}
-            {{#in-element (destination) insertBefore=null}}
-              <sb.Content>
-                <sb.Options>
-                  <sb.Option @value="foo" />
-                  <sb.Option @value="bar" />
-                </sb.Options>
-              </sb.Content>
-            {{/in-element}}
-          {{/if}}
+          <sb.Content @destination={{(destination)}}>
+            <sb.Options>
+              <sb.Option @value="foo" />
+              <sb.Option @value="bar" />
+            </sb.Options>
+          </sb.Content>
         </sb.Dropdown>
       </SelectBox>