From 79b4a736796bb386ace89b78de8b5cb16c85f3a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 22 Jul 2026 22:28:01 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=81=84=E3=81=8F=E3=81=A4?=
 =?UTF-8?q?=E3=81=8B=E3=81=AE=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E3=83=AA?=
 =?UTF-8?q?=E3=82=B9=E3=83=8A=E3=83=BC=E3=81=AE=E8=A7=A3=E9=99=A4=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=81=AE=E4=BF=AE=E6=AD=A3=20(#17768)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): いくつかのイベントリスナーの解除処理の修正

* fix
---
 .../MkStreamingNotificationsTimeline.vue      |  3 ++
 .../src/components/global/MkCondensedLine.vue | 44 ++++++++++++-------
 .../frontend/src/components/grid/MkGrid.vue   | 26 ++++++++++-
 .../frontend/src/directives/click-anime.ts    |  2 +-
 packages/frontend/src/utility/sound.ts        |  5 +++
 5 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue b/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
index 881548217c..3c15200f7f 100644
--- a/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
+++ b/packages/frontend/src/components/MkStreamingNotificationsTimeline.vue
@@ -182,6 +182,9 @@ onMounted(() => {
 
 onUnmounted(() => {
 	if (connection) connection.dispose();
+	if (scrollContainer != null) {
+		scrollContainer.removeEventListener('scroll', onScrollContainerScroll);
+	}
 });
 
 defineExpose({
diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue
index baa8d783f1..8263870b89 100644
--- a/packages/frontend/src/components/global/MkCondensedLine.vue
+++ b/packages/frontend/src/components/global/MkCondensedLine.vue
@@ -37,29 +37,41 @@ const observer = new ResizeObserver((entries) => {
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { onBeforeUnmount, useTemplateRef, watch } from 'vue';
 
 const props = withDefaults(defineProps<Props>(), {
 	minScale: 0,
 });
 
-const content = ref<HTMLSpanElement>();
+const content = useTemplateRef('content');
+
+function unobserve(el: HTMLSpanElement | null) {
+	if (el != null) {
+		delete (el as any)[contentSymbol];
+		observer.unobserve(el);
+		if (el.parentElement) {
+			observer.unobserve(el.parentElement);
+		}
+	}
+}
+
+function observe(el: HTMLSpanElement | null) {
+	if (el != null) {
+		(el as any)[contentSymbol] = props;
+		observer.observe(el);
+		if (el.parentElement) {
+			observer.observe(el.parentElement);
+		}
+	}
+}
 
 watch(content, (value, oldValue) => {
-	if (oldValue != null) {
-		delete (oldValue as any)[contentSymbol];
-		observer.unobserve(oldValue);
-		if (oldValue.parentElement) {
-			observer.unobserve(oldValue.parentElement);
-		}
-	}
-	if (value != null) {
-		(value as any)[contentSymbol] = props;
-		observer.observe(value);
-		if (value.parentElement) {
-			observer.observe(value.parentElement);
-		}
-	}
+	unobserve(oldValue);
+	observe(value);
+});
+
+onBeforeUnmount(() => {
+	unobserve(content.value);
 });
 </script>
 
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index 097a91bad5..2b7b005f62 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, toRefs, useTemplateRef, watch } from 'vue';
 import type { DataSource, GridSetting, GridState, Size } from '@/components/grid/grid.js';
 import type { CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
 import type { GridContext, GridEvent } from '@/components/grid/grid-event.js';
@@ -119,6 +119,10 @@ const { data } = toRefs(props);
  * 子コンポーネント -> gridのイベントでは原則使用せず、{@link emit}を使用する。
  */
 const bus = new GridEventEmitter();
+/**
+ * {@link resizeObserver}が発行した、まだ実行されていない{@link setTimeout}のID。アンマウント時にまとめて破棄するために保持する。
+ */
+const resizeTimeoutIds = new Set<number>();
 /**
  * テーブルコンポーネントのリサイズイベントを監視するための{@link ResizeObserver}。
  * 表示切替を検知し、サイズの再計算要求を発行するために使用する（マウント時にコンテンツが表示されていない場合、初手のサイズの自動計算が正常に働かないため）
@@ -128,7 +132,13 @@ const bus = new GridEventEmitter();
  *
  * @see {@link onResize}
  */
-const resizeObserver = new ResizeObserver((entries) => window.setTimeout(() => onResize(entries)));
+const resizeObserver = new ResizeObserver((entries) => {
+	const timeoutId = window.setTimeout(() => {
+		resizeTimeoutIds.delete(timeoutId);
+		onResize(entries);
+	});
+	resizeTimeoutIds.add(timeoutId);
+});
 
 const rootEl = useTemplateRef('rootEl');
 /**
@@ -1265,6 +1275,18 @@ onMounted(() => {
 
 	refreshData();
 });
+
+onUnmounted(() => {
+	resizeObserver.disconnect();
+	for (const timeoutId of resizeTimeoutIds) {
+		window.clearTimeout(timeoutId);
+	}
+	resizeTimeoutIds.clear();
+
+	// 選択操作の途中でアンマウントされた場合、windowに登録したままのリスナーが残ってしまうので解除しておく
+	unregisterMouseMove();
+	unregisterMouseUp();
+});
 </script>
 
 <style module lang="scss">
diff --git a/packages/frontend/src/directives/click-anime.ts b/packages/frontend/src/directives/click-anime.ts
index c0aaab2318..67adc0b7ec 100644
--- a/packages/frontend/src/directives/click-anime.ts
+++ b/packages/frontend/src/directives/click-anime.ts
@@ -29,7 +29,7 @@ export const clickAnimeDirective = {
 
 			target.addEventListener('mouseleave', () => {
 				target.classList.remove('_anime_bounce_ready');
-			});
+			}, { once: true, signal: abortController.signal });
 		}, { signal: abortController.signal });
 
 		el.addEventListener('click', () => {
diff --git a/packages/frontend/src/utility/sound.ts b/packages/frontend/src/utility/sound.ts
index 303244d126..82132d2eda 100644
--- a/packages/frontend/src/utility/sound.ts
+++ b/packages/frontend/src/utility/sound.ts
@@ -239,6 +239,11 @@ export async function getSoundDuration(file: string): Promise<number> {
 				audioEl.remove();
 			}
 		}, 100);
+		audioEl.addEventListener('error', () => {
+			resolve(0);
+			window.clearInterval(si);
+			audioEl.remove();
+		}, { once: true });
 	});
 }