From ee00019e9817dc7639f9b0a616f0a0e1ec3f6461 Mon Sep 17 00:00:00 2001
From: Andreas Tzionis <andy0n7@gmail.com>
Date: Wed, 27 Mar 2024 17:54:37 +0200
Subject: [PATCH] fixed hovered component and drag leave

---
 lib/client/vanilla/editor.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
index 7bb605b4..a223d63e 100644
--- a/lib/client/vanilla/editor.tsx
+++ b/lib/client/vanilla/editor.tsx
@@ -304,14 +304,15 @@ function Editor({ standaloneServer = false }) {
   const onCanvasDragOver = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
 
-    // get hovered component
-    const components = getComponents()
-    const component = components.find((c) => isEventOnElement(c, e))!
-
     // update empty flag
+    const components = getComponents()
     const isEmpty = components.length === 0
     if (isEmpty !== isEmptyCanvas) setIsEmptyCanvas(isEmpty)
-    if (!component) return
+
+    // get hovered component
+    if (components.length === 0) return
+    const componentWithEvent = components.find((c) => isEventOnElement(c, e))!
+    const component = componentWithEvent ?? components[components.length - 1]
 
     // update border
     const isTopHalf = isElementTopHalf(component, e)
@@ -334,7 +335,7 @@ function Editor({ standaloneServer = false }) {
   }
 
   const onCanvasDragLeave = (e: React.DragEvent<HTMLElement>) => {
-    if (!canvasRef.current?.contains(e.target as HTMLElement)) {
+    if (!canvasRef.current?.contains(e.relatedTarget as HTMLElement)) {
       setHoveredComponent(null)
       removeBorders()
     }