add dropdown content destination argument

zestia · Jan 17, 2025 · 7648f72 · 7648f72
1 parent e1d15c5
commit 7648f72
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>