this.sortableGroup.prepare() throws an error sometimes

[tniezurawski]

Error:

Cannot read properties of undefined (reading 'prepare')

Steps to reproduce?

I unfortunately don't know how to reproduce this. I have 2 Sentry Replays where I see users get this error but they don't do anything special.

For our traffic it happens very rarely but still happened to 30 users 🤷‍♂️

It looks like it's failing during some re-rendering & dragging but I tried 20x CPU slowdown and still no joi with reproduction.

I see some code is defensive when accessing this.sortableGroup:

ember-sortable/addon/src/modifiers/sortable-item.ts

Lines 124 to 130 in 5a2bba9

	get direction(): TDirection {
	return this.sortableGroup?.direction;
	}
	get groupDisabled(): boolean {
	return this.sortableGroup?.disabled;
	}

but not in all places.

Maybe I could add a bit of defensiveness to this.sortableGroup.prepare() to prevent this error from being thrown?

---

Instead of simple optional chaining I'd rather propose this:

  DRAG_ACTIONS.forEach((event) => window.addEventListener(event, dragThrottled));
  END_ACTIONS.forEach((event) => window.addEventListener(event, drop));

+ if (!this.sortableGroup) return;

  this.sortableGroup.prepare();
  set(this, 'isDragging', true);

I don't think anything below this.sortableGroup.prepare() makes sense without this.sortableGroup being present 🤷‍♂️