`destinationElement` null or undefined exception

Uncaught (in promise) Error: Assertion Failed: You cannot pass a null or undefined destination element to in-element
    at assert (index.js:172)
    at InElementNullCheckReference.value (index.js:5796)
    at Object.evaluate (runtime.js:2288)
    at AppendOpcodes.evaluate (runtime.js:1571)
    at LowLevelVM.evaluateSyscall (runtime.js:4989)
    at LowLevelVM.evaluateInner (runtime.js:4945)
    at LowLevelVM.evaluateOuter (runtime.js:4937)
    at JitVM.next (runtime.js:5992)
    at JitVM.execute (runtime.js:5964)
    at TemplateIteratorImpl.sync (runtime.js:6124)

There may be other ways to trigger this, but you will definitely see the issue if you use this in conjunction with Ember Power Select. Create a new app and add the following respectively to your application controller and application template

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  names = ['One', 'Two', 'Three']
}

<PowerSelect
  @searchEnabled={{true}}
  @options={{this.names}}
  @selected={{this.name}}
  @placeholder="Select some names..."
  @initiallyOpened={{true}}
  @onChange={{fn (mut this.name)}} as |name|>
  {{name}}
</PowerSelect>

@initiallyOpened={{true}} is the issue here. I traced the issue down to this line: https://github.com/cibernox/ember-basic-dropdown/blob/v3.0.17/addon/templates/components/basic-dropdown-content.hbs#L4

this.destinationElement is null at this moment and will throw when attempting to render into ember-basic-dropdown-wormhole DOM element since that is rendering later in DOM ordor (at the end of the page)

I took at stab at updating to ensure destinationElement is populated but not sure if this will cause any additional issues. Perhaps someone with a bit more intimate knowledge here will be able to advise.

  @tracked destinationElement: Element | null;

  constructor(owner: unknown, args: Args) {
    super(owner, args);

    this.destinationElement = null;
    next(() => {
      this.destinationElement = document.getElementById(this.args.destination);
    });
  }

this is related to https://github.com/cibernox/ember-power-select/issues/1354

[jherdman]

Is there a solution outside of @renderInPlace={{true}}?

[sacarino]

Ran into this as well. Based on this and https://github.com/cibernox/ember-power-select/issues/1354, I was able to get this workaround going in tests.

<PowerSelect
  // other args
  @initiallyOpened={{false}}
  @renderInPlace={{true}}
  as |stuff|
>
  {{stuff.andThings}}
</PowerSelect>