fix(frontend): まれにリアクション・絵文字ピッカーが動作しなくなる問題を修正 (#17349)

* Revert "fix(frontend): popupのりアクティビティがチャンクをまたいで切れる事がある問題を修正"

This reverts commit 0a93f526dd.

* fix: iOS PWA でリアクション・絵文字ピッカーが動作しない問題を修正

Agent-Logs-Url: https://github.com/lqvp/misskey-tempura/sessions/44526368-0e6a-4a94-8991-fcdc094d2b96

Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com>

* refactor

* fix

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com>

packages/frontend/src/os.ts

@@ -5,9 +5,9 @@
 
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { markRaw, ref, defineAsyncComponent, nextTick, effectScope, isRef, shallowReactive, watch } from 'vue';
+import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import * as Misskey from 'misskey-js';
-import type { Component, MaybeRef, ShallowReactive } from 'vue';
+import type { Component, MaybeRef } from 'vue';
 import type { ComponentEmit, ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -145,7 +145,7 @@ let popupIdCount = 0;
 export const popups = ref<{
 	id: number;
 	component: Component;
-	props: ShallowReactive<Record<string, any>>;
+	props: Record<string, any>;
 	events: Record<string, any>;
 }[]>([]);
 
@@ -183,32 +183,6 @@ type ComponentEmitsObject<C extends Component, IE = OverloadToUnion<ComponentEmi
 		: (...args: any[]) => void;
 }>;
 
-// ref をそのまま保持せず popup 側の reactive props に同期するようにして、スコープをまたいでリアクティビティが切れるのを防止する
-function normalizePopupProps<T extends Record<string, any>>(props: T): {
-	resolvedProps: ShallowReactive<T>;
-	stopSync: () => void;
-} {
-	const resolvedProps = shallowReactive<T>({} as T) as T; // shallowReactiveの返り値はreadonlyだが、実際には書き換えるので元の型で扱う
-	const scope = effectScope();
-
-	scope.run(() => {
-		for (const [key, value] of Object.entries(props)) {
-			if (isRef(value)) {
-				watch(value, (resolvedValue) => {
-					resolvedProps[key as keyof T] = resolvedValue as T[keyof T];
-				}, { immediate: true });
-			} else {
-				resolvedProps[key as keyof T] = value;
-			}
-		}
-	});
-
-	return {
-		resolvedProps: resolvedProps as ShallowReactive<T>,
-		stopSync: () => scope.stop(),
-	};
-}
-
 // NOTE: ジェネリック型つきのコンポーネントでは、emitsの型推論がうまく働かない（型変数を取り出すことはできないため）
 // NOTE: emitsがOverloadToUnionで対応しているオーバーロードの数を超える場合は、OverloadToUnionの個数を増やせばOK
 export function popup<T extends Component>(
@@ -219,24 +193,20 @@ export function popup<T extends Component>(
 	markRaw(component);
 
 	const id = ++popupIdCount;
-	const { resolvedProps, stopSync } = normalizePopupProps(props);
-	let disposed = false;
 	const dispose = () => {
-		if (disposed) return;
+		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
-		disposed = true;
-		stopSync();
-
 		nextTick(() => {
 			popups.value = popups.value.filter(p => p.id !== id);
 		});
 	};
-
+	const state = {
-	popups.value.push({
 		component,
-		props: resolvedProps,
+		props,
 		events,
 		id,
-	});
+	};
+
+	popups.value.push(state);
 
 	return {
 		dispose,

packages/frontend/src/utility/emoji-picker.ts

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineAsyncComponent, ref, watch } from 'vue';
+import { markRaw, shallowRef, ref, watch } from 'vue';
-import type { Ref } from 'vue';
+import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue';
-import { popup } from '@/os.js';
+import { popup, popupAsyncWithDialog } from '@/os.js';
 import { prefer } from '@/preferences.js';
 
 /**
@@ -15,53 +15,77 @@ import { prefer } from '@/preferences.js';
  * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。
  */
 class EmojiPicker {
-	private anchorElement: Ref<HTMLElement | null> = ref(null);
+	private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null;
-	private manualShowing = ref(false);
+	private emojisRef = ref<string[]>([]);
-	private onChosen?: (emoji: string) => void;
-	private onClosed?: () => void;
 
 	constructor() {
 		// nop
 	}
 
-	public async init() {
+	public init() {
-		const emojisRef = ref<string[]>([]);
+		// コンポーネントをプリロードしてキャッシュしておく。
-
+		// iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、
-		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
+		// show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。
-			emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
+		import('@/components/MkEmojiPickerDialog.vue').then(m => {
-		}, {
+			this.loadedComponent = markRaw(m.default);
-			immediate: true,
+		}).catch(err => {
+			console.error('[EmojiPicker] Failed to preload MkEmojiPickerDialog:', err);
 		});
 
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
-			anchorElement: this.anchorElement,
+			this.emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
-			pinnedEmojis: emojisRef,
-			asReactionPicker: false,
-			manualShowing: this.manualShowing,
-			choseAndClose: false,
 		}, {
-			done: emoji => {
+			immediate: true,
-				if (this.onChosen) this.onChosen(emoji);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.anchorElement.value = null;
-				if (this.onClosed) this.onClosed();
-			},
 		});
 	}
 
 	public show(
 		anchorElement: HTMLElement,
-		onChosen?: EmojiPicker['onChosen'],
+		onChosen?: (emoji: string) => void,
-		onClosed?: EmojiPicker['onClosed'],
+		onClosed?: () => void,
 	) {
-		this.anchorElement.value = anchorElement;
+		const anchorRef = shallowRef(anchorElement);
-		this.manualShowing.value = true;
+
-		this.onChosen = onChosen;
+		if (this.loadedComponent) {
-		this.onClosed = onClosed;
+			// コンポーネント解決済みのため同期的に popup() できる。
+			// ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。
+			const { dispose } = popup(this.loadedComponent, {
+				anchorElement: anchorRef,
+				pinnedEmojis: this.emojisRef,
+				asReactionPicker: false,
+				choseAndClose: false,
+			}, {
+				done: (emoji: string) => {
+					if (onChosen) onChosen(emoji);
+				},
+				closed: () => {
+					if (onClosed) onClosed();
+					dispose();
+				},
+			});
+		} else {
+			// フォールバック: 初回タップがプリロード完了前
+			popupAsyncWithDialog(
+				import('@/components/MkEmojiPickerDialog.vue').then(m => {
+					this.loadedComponent = markRaw(m.default);
+					return this.loadedComponent;
+				}),
+				{
+					anchorElement: anchorRef,
+					pinnedEmojis: this.emojisRef,
+					asReactionPicker: false,
+					choseAndClose: false,
+				},
+				{
+					done: (emoji: string) => {
+						if (onChosen) onChosen(emoji);
+					},
+					closed: () => {
+						if (onClosed) onClosed();
+					},
+				},
+			);
+		}
 	}
 }
 

packages/frontend/src/utility/reaction-picker.ts

@@ -4,57 +4,85 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { defineAsyncComponent, ref, watch } from 'vue';
+import { markRaw, shallowRef, ref, watch } from 'vue';
-import type { Ref } from 'vue';
+import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue';
-import { popup } from '@/os.js';
+import { popup, popupAsyncWithDialog } from '@/os.js';
 import { prefer } from '@/preferences.js';
 
 class ReactionPicker {
-	private anchorElement: Ref<HTMLElement | null> = ref(null);
+	private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null;
-	private manualShowing = ref(false);
+	private reactionsRef = ref<string[]>([]);
-	private targetNote: Ref<Misskey.entities.Note | null> = ref(null);
-	private onChosen?: (reaction: string) => void;
-	private onClosed?: () => void;
 
 	constructor() {
 		// nop
 	}
 
-	public async init() {
+	public init() {
-		const reactionsRef = ref<string[]>([]);
+		// コンポーネントをプリロードしてキャッシュしておく。
+		// iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、
+		// show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。
+		import('@/components/MkEmojiPickerDialog.vue').then(m => {
+			this.loadedComponent = markRaw(m.default);
+		}).catch(err => {
+			console.error('[ReactionPicker] Failed to preload MkEmojiPickerDialog:', err);
+		});
 
 		watch([prefer.r.emojiPaletteForReaction, prefer.r.emojiPalettes], () => {
-			reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? [];
+			this.reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? [];
 		}, {
 			immediate: true,
 		});
-
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			anchorElement: this.anchorElement,
-			pinnedEmojis: reactionsRef,
-			asReactionPicker: true,
-			targetNote: this.targetNote,
-			manualShowing: this.manualShowing,
-		}, {
-			done: reaction => {
-				if (this.onChosen) this.onChosen(reaction);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.anchorElement.value = null;
-				if (this.onClosed) this.onClosed();
-			},
-		});
 	}
 
-	public show(anchorElement: HTMLElement | null, targetNote: Misskey.entities.Note | null, onChosen?: ReactionPicker['onChosen'], onClosed?: ReactionPicker['onClosed']) {
+	public show(
-		this.anchorElement.value = anchorElement;
+		anchorElement: HTMLElement | null,
-		this.targetNote.value = targetNote;
+		targetNote: Misskey.entities.Note | null,
-		this.manualShowing.value = true;
+		onChosen?: (reaction: string) => void,
-		this.onChosen = onChosen;
+		onClosed?: () => void,
-		this.onClosed = onClosed;
+	) {
+		const anchorRef = shallowRef(anchorElement);
+		const targetNoteRef = ref(targetNote);
+
+		if (this.loadedComponent) {
+			// 通常パス: コンポーネント解決済みのため同期的に popup() できる。
+			// ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。
+			const { dispose } = popup(this.loadedComponent, {
+				anchorElement: anchorRef,
+				pinnedEmojis: this.reactionsRef,
+				asReactionPicker: true,
+				targetNote: targetNoteRef,
+			}, {
+				done: (reaction: string) => {
+					if (onChosen) onChosen(reaction);
+				},
+				closed: () => {
+					if (onClosed) onClosed();
+					dispose();
+				},
+			});
+		} else {
+			// フォールバック: 初回タップがプリロード完了前
+			popupAsyncWithDialog(
+				import('@/components/MkEmojiPickerDialog.vue').then(m => {
+					this.loadedComponent = markRaw(m.default);
+					return this.loadedComponent;
+				}),
+				{
+					anchorElement: anchorRef,
+					pinnedEmojis: this.reactionsRef,
+					asReactionPicker: true,
+					targetNote: targetNoteRef,
+				},
+				{
+					done: (reaction: string) => {
+						if (onChosen) onChosen(reaction);
+					},
+					closed: () => {
+						if (onClosed) onClosed();
+					},
+				},
+			);
+		}
 	}
 }