fix: Fix memory leaking of MessageInput (#21968)

src/lib/components/channel/MessageInput.svelte

@@ -2,7 +2,7 @@
 	import { toast } from 'svelte-sonner';
 	import { v4 as uuidv4 } from 'uuid';
 
-	import { tick, getContext, onMount, onDestroy } from 'svelte';
+	import { tick, getContext, onMount } from 'svelte';
 
 	const i18n = getContext('i18n');
 
@@ -510,7 +510,7 @@
 		}
 	};
 
-	const onDragOver = (e) => {
+	const onDragOver = (e: DragEvent) => {
 		e.preventDefault();
 
 		// Check if a file is being draggedOver.
@@ -525,7 +525,7 @@
 		draggedOver = false;
 	};
 
-	const onDrop = async (e) => {
+	const onDrop = async (e: DragEvent) => {
 		e.preventDefault();
 
 		if (e.dataTransfer?.files && acceptFiles) {
@@ -567,7 +567,7 @@
 		onChange();
 	}
 
-	onMount(async () => {
+	onMount(() => {
 		suggestions = [
 			{
 				char: '@',
@@ -633,24 +633,32 @@
 		}, 100);
 
 		window.addEventListener('keydown', handleKeyDown);
-		await tick();
 
-		const dropzoneElement = document.getElementById('channel-container');
+		let isDestroyed = false;
+		let dropzoneElement: HTMLElement | null = null;
+		const initialize = async () => {
+			await tick();
+			if (isDestroyed) return;
 
-		dropzoneElement?.addEventListener('dragover', onDragOver);
-		dropzoneElement?.addEventListener('drop', onDrop);
-		dropzoneElement?.addEventListener('dragleave', onDragLeave);
-	});
+			dropzoneElement = document.getElementById('channel-container');
+			if (dropzoneElement) {
+				dropzoneElement.addEventListener('dragover', onDragOver);
+				dropzoneElement.addEventListener('drop', onDrop);
+				dropzoneElement.addEventListener('dragleave', onDragLeave);
+			}
+		}
+		initialize();
 
-	onDestroy(() => {
-		window.removeEventListener('keydown', handleKeyDown);
+		return () => {
+			isDestroyed = true;
 
-		const dropzoneElement = document.getElementById('channel-container');
+			window.removeEventListener('keydown', handleKeyDown);
 
-		if (dropzoneElement) {
-			dropzoneElement?.removeEventListener('dragover', onDragOver);
-			dropzoneElement?.removeEventListener('drop', onDrop);
-			dropzoneElement?.removeEventListener('dragleave', onDragLeave);
+			if (dropzoneElement) {
+				dropzoneElement.removeEventListener('dragover', onDragOver);
+				dropzoneElement.removeEventListener('drop', onDrop);
+				dropzoneElement.removeEventListener('dragleave', onDragLeave);
+			}
 		}
 	});
 </script>