chore: improve reaction picker behaviour

src/client/components/ui/modal.vue

@@ -69,15 +69,24 @@ export default defineComponent({
 	mounted() {
 		this.$watch('src', () => {
 			this.fixed = getFixedContainer(this.src) != null;
+			this.$nextTick(() => {
+				this.align();
+			});
 		}, { immediate: true });
 
 		this.$nextTick(() => {
 			const popover = this.$refs.content as any;
-
-			// TODO: ResizeObserver無くしたい
 			new ResizeObserver((entries, observer) => {
+				this.align();
+			}).observe(popover);
+		});
+	},
+	methods: {
+		align() {
 			if (!this.popup) return;
 
+			const popover = this.$refs.content as any;
+
 			const rect = this.src.getBoundingClientRect();
 			
 			const width = popover.offsetWidth;
@@ -130,10 +139,8 @@ export default defineComponent({
 
 			popover.style.left = left + 'px';
 			popover.style.top = top + 'px';
-			}).observe(popover);
-		});
 		},
-	methods: {
+
 		childRendered() {
 			// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 			const content = this.$refs.content.children[0];

src/client/os.ts

@@ -360,16 +360,12 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 let reactionPicker = null;
 export async function pickReaction(src: HTMLElement, chosen, closed) {
 	if (reactionPicker) {
-		if (reactionPicker.opening) return;
-
-		reactionPicker.opening = true;
 		reactionPicker.src.value = src;
 		reactionPicker.manualShowing.value = true;
 		reactionPicker.chosen = chosen;
 		reactionPicker.closed = closed;
 	} else {
 		reactionPicker = {
-			opening: true,
 			src: ref(src),
 			manualShowing: ref(true),
 			chosen, closed
@@ -388,7 +384,6 @@ export async function pickReaction(src: HTMLElement, chosen, closed) {
 			closed: () => {
 				reactionPicker.src.value = null;
 				reactionPicker.closed();
-				reactionPicker.opening = false;
 			}
 		});
 	}