fix(core): check if handle is connectable

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/composables/useHandle.ts

@@ -169,6 +169,7 @@ export default function useHandle({
           // todo: remove `vue-flow__handle-connecting` in next major version
           handleDomNode.classList.add('connecting', 'vue-flow__handle-connecting')
           handleDomNode.classList.toggle('valid', isValid)
+          // todo: remove this in next major version
           handleDomNode.classList.toggle('vue-flow__handle-valid', isValid)
         }
       }

packages/core/src/utils/handle.ts

@@ -96,7 +96,7 @@ export function isValidHandle(
     connection: { source: '', target: '', sourceHandle: null, targetHandle: null },
   }
 
-  if (handleDomNode && handle) {
+  if (handleToCheck && handleDomNode && handle) {
     const handleNodeId = handleDomNode.getAttribute('data-nodeid')
     const handleId = handleDomNode.getAttribute('data-handleid')
 
@@ -111,7 +111,7 @@ export function isValidHandle(
 
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
-      connectionMode === ConnectionMode.Strict
+      handleToCheck.classList.contains('connectable') && connectionMode === ConnectionMode.Strict
         ? (isTarget && handle.type === 'source') || (!isTarget && handle.type === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId