Cannot read property 'contains' of null error

[ondrejsevcik]

Hi, in our app, we're getting a lot of these errors. My guess there is something wrong with a cleanup of the event handler because once the error pops up, any subsequent click triggers another error into console.

[knownasilya]

Getting something similar:

TypeError: Cannot read property 'parentElement' of null
  File "addon-tree-output/ember-basic-dropdown/components/basic-dropdown/content.js", line 280, in Object.animateOut
          let parentElement = this.get('renderInPlace') ? dropdownElement.parentElement.parentElement...
  File "addon-tree-output/ember-basic-dropdown/components/basic-dropdown/content.js", line 223, in Object.close
            this.animateOut(this.dropdownElement);
  File "addon-tree-output/ember-basic-dropdown/components/basic-dropdown/content.js", line 158, in Object.didReceiveAttrs

[gilest]

Occurrence I'm seeing:

TypeError: Cannot read property 'parentElement' of null (Most recent call first)
File addon-tree-output/ember-basic-dropdown/components/basic-dropdown-content.js line 151 col 1 in BasicDropdownContent.animateOut
let parentElement = dropdownElement.parentElement;

It seems like the will-destroy modifier sometimes calls animateOut with a null dropdownElement argument.

Perhaps animateOut could be amended to return early if the dropdownElement is not present.

  @action
  animateOut(dropdownElement: Element): void {
    if (!this.animationEnabled) return;
    if (!dropdownElement) return; // + Added this line
    let parentElement = dropdownElement.parentElement;
    if (parentElement === null) return;
    if (this.args.renderInPlace) {
      parentElement = parentElement.parentElement
    }
    if (parentElement === null) return;
    let clone = dropdownElement.cloneNode(true) as Element;
    clone.id = `${clone.id}--clone`;
    clone.classList.remove(...this.transitioningInClass.split(' '));
    clone.classList.add(...this.transitioningOutClass.split(' '));
    parentElement.appendChild(clone);
    this.animationClass = this.transitionedInClass;
    waitForAnimations(clone, function() {
      (parentElement as HTMLElement).removeChild(clone);
    });
  }

[beerlington]

I'm seeing this too with the last 2.0.13. @gilest did you find a work around?

[gilest]

@gilest did you find a work around?

No. Has only occurred a handful of times in the app I'm maintaining

[gilest]

@beerlington

2.0.13

Have your tried updating to v3?

Or you could try forking the addon and applying my patch. If it solves the problem you could make a PR 😄

LOC: https://github.com/cibernox/ember-basic-dropdown/blob/3d57b4ae8daadfae1e972330e3fe1276af007e41/addon/components/basic-dropdown-content.ts#L159

[beerlington]

@gilest

Have your tried updating to v3?

Yeah we use 3.x on another app and do not have this problem. It's just weird because we've been using v2 in this specific app without any issues for a while and then just noticed it. The good news is it doesn't seem to actually affect the UX, and just raises an exception in the console. I was more just curious if there was a workaround without having to do the upgrade right now.

[mkszepp]

Its a very old issue...

I'm closing issue for now, as it was occured in v2 and is fixed with v3, like i have read

If the bug occures also with v8, let me know