Custom elements with disconnectedCallback error

I have a drag item which contains a custom element (sl-button-group to be specific) and when I start dragging, it emits an error when running its disconnect logic.

Error

Uncaught TypeError: Cannot read property 'removeEventListener' of undefined at HTMLElement.disconnectedCallback

Code

disconnectedCallback() {
  this.buttonGroup.removeEventListener('sl-focus', this.handleFocus);
  this.buttonGroup.removeEventListener('sl-blur', this.handleBlur);
}

It seems that by the time this callback is fired, svelte-dnd-action has already removed its corresponding node from the DOM, causing the reference error. Is there a known workaround for this sort of thing?

Thanks!

[isaacHagoel]

You closed it as I was writing a similar comment 😄 the original comment below. pls let me know if I can help further.

looks like they use stencil. I think the ref on the child div in this line gets confused.

      <div ref={el => (this.buttonGroup = el)} part="base" class="button-group" aria-label={this.label}>

[danny-andrews]

I think you’re exactly right. I’m running into a similar issue when trying to call a method on one of the shoelace components in onMount but it’s throwing an error because a ref is undefined. Hopefully I’ll get to the bottom of it. Thanks anyway for the help.