`destinationElement` null or undefined exception

[alexdiliberto]

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

[jgadbois]

I am getting the same error when using named blocks.

[cibernox]

Can you write a reproduction on a test? This is probably easy to fix with a repro on a test.

[alexdiliberto]

@cibernox See https://github.com/cibernox/ember-basic-dropdown/pull/619

[jgadbois]

I am getting the error using a very basic dropdown directly in the application.hbs.

<BasicDropdown as |dd|
>
  <dd.Trigger>TEST</dd.Trigger>
  <dd.Content>CONTENT</dd.Content>
</BasicDropdown>

@renderInPlace={{true}} fixes it, but breaks when rendered on the body.

[jgadbois]

Reverting to 3.0.18 fixed this for me

[jherdman]

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

[josemarluedke]

Also seeing this error.

[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>

[andreyfel]

I encountered this error while updating ember-cached-decorator-polyfill from 0.1.4 to 1.0.1 in our app. I was able to track it down to this issue https://github.com/emberjs/ember-classic-decorator/issues/99.

If you are still experiencing this issue, check if you have ember-classic-decorator in your dependencies.