Fix getEventListenerTarget when target element is not an instance o…

…f `HTMLElement` (#335)

For example, when the target element is an SVGElement, the event listener target returned was the owner document instead.

This causes issues with touch events when the `target` is an SVGElement. If the `event.target` element is removed from the document events will still be targeted at it, and hence won't always bubble up to the window or document anymore. If there is any risk of an element being removed while it is being dragged, the best practice is to attach the event listeners directly to the target.

.changeset/fix-listener-target.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/core": patch
+---
+
+Fix `getEventListenerTarget` when target element is not an instance of `HTMLElement`

packages/core/src/sensors/utilities/Listeners.ts

@@ -4,7 +4,7 @@ export class Listeners {
     handler: EventListenerOrEventListenerObject;
   }[] = [];
 
-  constructor(private target: HTMLElement | Document | Window) {}
+  constructor(private target: EventTarget) {}
 
   public add(
     eventName: string,

packages/core/src/sensors/utilities/getEventListenerTarget.ts

@@ -2,6 +2,11 @@ import {getOwnerDocument} from '../../utilities';
 
 export function getEventListenerTarget(
   element: EventTarget | null
-): HTMLElement | Document {
-  return element instanceof HTMLElement ? element : getOwnerDocument(element);
+): EventTarget | Document {
+  // If the `event.target` element is removed from the document events will still be targeted
+  // at it, and hence won't always bubble up to the window or document anymore.
+  // If there is any risk of an element being removed while it is being dragged,
+  // the best practice is to attach the event listeners directly to the target.
+  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
+  return element instanceof EventTarget ? element : getOwnerDocument(element);
 }