Handle non-detach connection detach events

go/base/static/js/src/components/plumbing/connections.js

@@ -142,9 +142,9 @@
     },
 
     onPlumbConnect: function(e) {
-      var sourceId = $(e.source).attr('data-uuid'),
-          targetId = $(e.target).attr('data-uuid'),
-          connectionId = idOfConnection(sourceId, targetId);
+      var sourceId = $(e.source).attr('data-uuid');
+      var targetId = $(e.target).attr('data-uuid');
+      var connectionId = idOfConnection(sourceId, targetId);
 
       // Case 1:
       // -------
@@ -176,19 +176,26 @@
     },
 
     onPlumbDisconnect: function(e) {
-      var sourceId = $(e.source).attr('data-uuid'),
-          targetId = $(e.target).attr('data-uuid'),
-          connectionId = idOfConnection(sourceId, targetId);
+      var sourceId = $(e.source).attr('data-uuid');
+      var targetId = $(e.target).attr('data-uuid');
+      var connectionId;
 
       // Case 1:
       // -------
+      // A new connection was created in the UI, but dropped before it reached
+      // a target, we can ignore it.
+      if (typeof targetId == 'undefined') { return; }
+      connectionId = idOfConnection(sourceId, targetId);
+
+      // Case 2:
+      // -------
       // The connection model and its view have been removed from its
       // collection, so its connection view was destroyed (along with the
       // jsPlumb connection). We don't need to remove the connection model
       // and view since they no longer exists.
       if (!this.has(connectionId)) { return; }
 
-      // Case 2:
+      // Case 3:
       // -------
       // The connection was removed in the UI, so the model and view still
       // exist. We need to remove them.

go/base/static/js/test/components/plumbing/connections.test.js

@@ -225,6 +225,23 @@ describe("go.components.plumbing.connections", function() {
 
         jsPlumb.detach(a1L2_b2R2.plumbConnection);
       });
+
+      it("should ignore the event if the connection has no target", function() {
+        var a1L2 = diagram.endpoints.get('a1L2');
+        var b2R2 = diagram.endpoints.get('b2R2');
+        var a1L2_b2R2 = connections.get('a1L2-b2R2');
+        var plumbConnection = a1L2_b2R2.plumbConnection;
+
+        plumbConnection.target = null;
+        a1L2_b2R2.plumbConnection.target = null;
+
+        sinon.spy(console, 'log');
+        jsPlumb.detach(a1L2_b2R2.plumbConnection);
+
+        // jsPlumb logs errors instead of throwing them
+        assert(!console.log.called);
+        console.log.restore();
+      });
     });
   });
 });