diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index b2b269af473..ea6d16ed04b 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -83,6 +83,7 @@ $chat-line-height: 1.6em;
 
 // fade transition
 $fade-transition: all var(--animation-quick, 100ms) ease-in-out;
+$fade-transition-slow: all var(--animation-slow, 300ms) ease-in-out;
 
 .fade {
 	&-enter {
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 1ff11e34839..f7056bb8b21 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -21,7 +21,7 @@
 <template>
 	<div class="chatView"
 		@dragover.prevent="handleDragOver"
-		@dragleave.prevent="isDraggingOver = false"
+		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDropFiles">
 		<transition name="slide" mode="out-in">
 			<div v-show="isDraggingOver"
@@ -110,6 +110,12 @@ export default {
 			}
 		},
 
+		handleDragLeave(event) {
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				this.isDraggingOver = false
+			}
+		},
+
 		handleDropFiles(event) {
 			if (!this.isDraggingOver) {
 				return
@@ -187,7 +193,8 @@ export default {
 	}
 	&-enter-active,
 	&-leave-active {
-		transition: $fade-transition;
+		pointer-events: none;
+		transition: $fade-transition-slow;
 	}
 }
 </style>