fix: don't lose drag source/preview if disconnected and immediately reconnected

.yarn/versions/42579e0f.yml

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

packages/react-dnd/src/internals/SourceConnector.ts

@@ -53,6 +53,8 @@ export class SourceConnector implements Connector {
 	private dragPreviewOptionsInternal: DragPreviewOptions | null = null
 	private dragPreviewUnsubscribe: Unsubscribe | undefined
 
+	private isDragSourceConnected = false
+	private isDragPreviewConnected = false
 	private lastConnectedHandlerId: Identifier | null = null
 	private lastConnectedDragSource: any = null
 	private lastConnectedDragSourceOptions: any = null
@@ -118,7 +120,7 @@ export class SourceConnector implements Connector {
 			return didChange
 		}
 
-		if (didChange) {
+		if (didChange || !this.isDragSourceConnected) {
 			this.lastConnectedHandlerId = this.handlerId
 			this.lastConnectedDragSource = dragSource
 			this.lastConnectedDragSourceOptions = this.dragSourceOptions
@@ -127,6 +129,7 @@ export class SourceConnector implements Connector {
 				dragSource,
 				this.dragSourceOptions,
 			)
+			this.isDragSourceConnected = true
 		}
 		return didChange
 	}
@@ -152,7 +155,7 @@ export class SourceConnector implements Connector {
 			return
 		}
 
-		if (didChange) {
+		if (didChange || !this.isDragPreviewConnected) {
 			this.lastConnectedHandlerId = this.handlerId
 			this.lastConnectedDragPreview = dragPreview
 			this.lastConnectedDragPreviewOptions = this.dragPreviewOptions
@@ -161,6 +164,7 @@ export class SourceConnector implements Connector {
 				dragPreview,
 				this.dragPreviewOptions,
 			)
+			this.isDragPreviewConnected = true
 		}
 	}
 
@@ -195,15 +199,15 @@ export class SourceConnector implements Connector {
 			this.dragSourceUnsubscribe()
 			this.dragSourceUnsubscribe = undefined
 		}
+		this.isDragSourceConnected = false
 	}
 
 	public disconnectDragPreview() {
 		if (this.dragPreviewUnsubscribe) {
 			this.dragPreviewUnsubscribe()
 			this.dragPreviewUnsubscribe = undefined
-			this.dragPreviewNode = null
-			this.dragPreviewRef = null
 		}
+		this.isDragPreviewConnected = false
 	}
 
 	private get dragSource() {

packages/react-dnd/src/internals/__tests__/SourceConnector.spec.tsx

@@ -34,6 +34,48 @@ describe('SourceConnector', () => {
 		expect(unsubscribeDragSource).toHaveBeenCalled()
 	})
 
+	it('handles disconnect and immediate reconnect', () => {
+		const unsubscribeDragSource = jest.fn()
+		const unsubscribeDragPreview = jest.fn()
+		backend.connectDragSource.mockReturnValue(unsubscribeDragSource)
+		backend.connectDragPreview.mockReturnValue(unsubscribeDragPreview)
+
+		connector.receiveHandlerId('test')
+		connector.hooks.dragSource()({})
+		connector.hooks.dragPreview()({})
+		expect(backend.connectDragSource).toHaveBeenCalled()
+		expect(backend.connectDragPreview).toHaveBeenCalled()
+		expect(unsubscribeDragSource).not.toHaveBeenCalled()
+		expect(unsubscribeDragPreview).not.toHaveBeenCalled()
+		backend.connectDragSource.mockClear()
+		backend.connectDragPreview.mockClear()
+
+		connector.disconnectDragSource()
+		connector.disconnectDragPreview()
+		expect(backend.connectDragSource).not.toHaveBeenCalled()
+		expect(backend.connectDragPreview).not.toHaveBeenCalled()
+		expect(unsubscribeDragSource).toHaveBeenCalled()
+		expect(unsubscribeDragPreview).toHaveBeenCalled()
+		unsubscribeDragSource.mockClear()
+		unsubscribeDragPreview.mockClear()
+
+		// Source & preview should be connected after disconnect
+		connector.reconnect()
+		expect(backend.connectDragSource).toHaveBeenCalled()
+		expect(backend.connectDragPreview).toHaveBeenCalled()
+		expect(unsubscribeDragSource).not.toHaveBeenCalled()
+		expect(unsubscribeDragPreview).not.toHaveBeenCalled()
+		backend.connectDragSource.mockClear()
+		backend.connectDragPreview.mockClear()
+
+		// Source & preview should not be connected a second time
+		connector.reconnect()
+		expect(backend.connectDragSource).not.toHaveBeenCalled()
+		expect(backend.connectDragPreview).not.toHaveBeenCalled()
+		expect(unsubscribeDragSource).not.toHaveBeenCalled()
+		expect(unsubscribeDragPreview).not.toHaveBeenCalled()
+	})
+
 	it('unsubscribes drag preview when hook is called without node', () => {
 		const unsubscribeDragSource = jest.fn()
 		backend.connectDragSource.mockReturnValueOnce(unsubscribeDragSource)