fix: "Invariant Violation: Expected targetIds to be registered."

.github/workflows/ci.yml

@@ -28,11 +28,7 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-
-      - run: yarn version check
-        if: "github.actor != 'dependabot[bot]' && !contains(github.ref , 'release/') && !contains(github.head_ref , 'release/')"
-        name: Version Check
-
+
       - run: yarn install
         name: Install Dependencies
 

.github/workflows/version-check.yml

@@ -0,0 +1,16 @@
+name: Version Check
+on: [push, pull_request]
+env:
+  DEFAULT_NODE_VERSION: 16
+jobs:
+  version-check:
+    runs-on: ubuntu-latest
+    if: "github.ref != 'main' &&  github.head_ref != 'main' && !contains(github.ref , 'release/') && !contains(github.head_ref , 'release/') && !contains(github.ref , 'dependabot/') && !contains(github.head_ref , 'dependabot/')"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: ${{env.DEFAULT_NODE_VERSION}}
+      - run: yarn version check

.yarn/versions/e42d7e63.yml

@@ -0,0 +1,9 @@
+releases:
+  react-dnd-html5-backend: patch
+
+declined:
+  - react-dnd-documentation
+  - react-dnd-examples
+  - test-suite-cra
+  - test-suite-vite
+  - react-dnd-test-utils

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to React-DnD
 
-So you want to contibute to React-DnD? Thank you! This library is a community effort, and your contributions are greatly appreciated.
+So you want to contribute to React-DnD? Thank you! This library is a community effort, and your contributions are greatly appreciated.
 
 ## FAQ
 

packages/backend-html5/src/HTML5BackendImpl.ts

@@ -347,6 +347,7 @@ export class HTML5BackendImpl implements Backend {
 		if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
 			this.actions.endDrag()
 		}
+		this.cancelHover()
 	}
 
 	private setCurrentDragSourceNode(node: Element | null) {
@@ -400,6 +401,36 @@ export class HTML5BackendImpl implements Backend {
 		return false
 	}
 
+	private scheduleHover = (dragOverTargetIds: string[] | null) => {
+		if (
+			this.hoverRafId === null &&
+			typeof requestAnimationFrame !== 'undefined'
+		) {
+			// cancel any existing hover if present
+			this.cancelHover()
+
+			this.hoverRafId = requestAnimationFrame(() => {
+				if (this.monitor.isDragging()) {
+					this.actions.hover(dragOverTargetIds || [], {
+						clientOffset: this.lastClientOffset,
+					})
+				}
+
+				this.hoverRafId = null
+			})
+		}
+	}
+
+	private cancelHover = () => {
+		if (
+			this.hoverRafId !== null &&
+			typeof cancelAnimationFrame !== 'undefined'
+		) {
+			cancelAnimationFrame(this.hoverRafId)
+			this.hoverRafId = null
+		}
+	}
+
 	public handleTopDragStartCapture = (): void => {
 		this.clearCurrentDragSourceNode()
 		this.dragStartSourceIds = []
@@ -429,6 +460,7 @@ export class HTML5BackendImpl implements Backend {
 		// Avoid crashing if we missed a drop event or our previous drag died
 		if (this.monitor.isDragging()) {
 			this.actions.endDrag()
+			this.cancelHover()
 		}
 
 		// Don't publish the source just yet (see why below)
@@ -530,6 +562,7 @@ export class HTML5BackendImpl implements Backend {
 			// Only proceed if we have not handled it already.
 			this.actions.endDrag()
 		}
+		this.cancelHover()
 	}
 
 	public handleTopDragEnterCapture = (e: DragEvent): void => {
@@ -622,20 +655,7 @@ export class HTML5BackendImpl implements Backend {
 		this.altKeyPressed = e.altKey
 		this.lastClientOffset = getEventClientOffset(e)
 
-		if (
-			this.hoverRafId === null &&
-			typeof requestAnimationFrame !== 'undefined'
-		) {
-			this.hoverRafId = requestAnimationFrame(() => {
-				if (this.monitor.isDragging()) {
-					this.actions.hover(dragOverTargetIds || [], {
-						clientOffset: this.lastClientOffset,
-					})
-				}
-
-				this.hoverRafId = null
-			})
-		}
+		this.scheduleHover(dragOverTargetIds)
 
 		const canDrop = (dragOverTargetIds || []).some((targetId) =>
 			this.monitor.canDropOnTarget(targetId),
@@ -672,6 +692,7 @@ export class HTML5BackendImpl implements Backend {
 		if (this.isDraggingNativeItem()) {
 			setTimeout(() => this.endDragNativeItem(), 0)
 		}
+		this.cancelHover()
 	}
 
 	public handleTopDropCapture = (e: DragEvent): void => {
@@ -709,6 +730,7 @@ export class HTML5BackendImpl implements Backend {
 		} else if (this.monitor.isDragging()) {
 			this.actions.endDrag()
 		}
+		this.cancelHover()
 	}
 
 	public handleSelectStart = (e: DragEvent): void => {