Cannot read property 'getOptions' of undefined

~~I get the following error when hiding/unhiding the container where the drag-handle is in and clicking the drag-handle:~~

I narrowed down the error, which happens when the Container receives classes that change, e.g. when adding/removing a class conditionally. As soon as the classList changes, the error gets thrown.

index.js?c878:formatted:785 Uncaught TypeError: Cannot read property 'getOptions' of undefined
    at HTMLDocument.De (index.js?c878:formatted:785)

I think it is this function:

smooth-dnd/src/mediator.ts

Line 321 in 136e6d5

function onMouseDown(event: MouseEvent & TouchEvent) {

I have a private repo that serves as a repro, I added you, @kutlugsahin, as a contributor to check the error.

Hey @johannes-z ,

I just made a quick look. Your Container has some components other than Draggable.
Try to organize your structure so that Container will have only Draggable type of children. Otherwise anything can go wrong. Let me know if the issue insists after doing that.

Cheers!

@kutlugsahin Thanks, that did actually work. For everybody else having the same issue (I'm using vue):

This does not work:

<Container>
  <h2>Some Heading</h2>
  <Draggable>...</Draggable>
</Container>

This works:

<h2>Some Heading</h2>
<Container>
  <Draggable>...</Draggable>
</Container>

This issue helped me track down the unknown cause.

In my case I was updating the class of the container to highlight the active dropzone.

<Container
  :class="{
    'border-transparent': !isDraggingWithin,
    'border-blue': isDraggingWithin
  }"
  @drag-enter="isDraggingWithin = true"
  @drag-leave="isDraggingWithin = false"
>
  <Draggable v-for="item in items" ...></Draggable>
</Container>

Wrapping it in another div and moving the dynamic classes there fixed it.

<div
  :class="{
    ...
  }"
>
  <Container>
    <Draggable />
  </Container>
</div>