diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 2b41d0b0..cf18ed54 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/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)
         }
       }
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index 16b3a7c8..be05ebc0 100644
--- a/packages/core/src/utils/handle.ts
+++ b/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