fix: prevent emoji picker from closing when clicking search input

The emoji picker (vuemoji-picker) uses emoji-picker-element which renders
its internal elements inside Shadow DOM. The closeWhenClickedOutside helper
was using parentElement traversal which doesn't work across shadow boundaries,
causing clicks on the search input to incorrectly trigger the close callback.

This fix:
- Uses event.composedPath() instead of parentElement traversal, which properly
  includes elements inside Shadow DOM
- Updates Reactions.vue to pass the actual DOM element ($el) instead of the
  Vue component instance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: kolaente

frontend/src/components/input/Reactions.vue

@@ -96,11 +96,11 @@ function getReactionTooltip(users: IUser[], value: string | number) {
 }
 
 const showEmojiPicker = ref(false)
-const emojiPickerRef = ref<HTMLElement | null>(null)
+const emojiPickerRef = ref<InstanceType<typeof VuemojiPicker> | null>(null)
 
 function hideEmojiPicker(e: MouseEvent) {
-	if (showEmojiPicker.value && emojiPickerRef.value) {
-		closeWhenClickedOutside(e, emojiPickerRef.value, () => showEmojiPicker.value = false)
+	if (showEmojiPicker.value && emojiPickerRef.value?.$el) {
+		closeWhenClickedOutside(e, emojiPickerRef.value.$el, () => showEmojiPicker.value = false)
 	}
 }
 

frontend/src/helpers/closeWhenClickedOutside.ts

@@ -6,20 +6,11 @@
  * @param closeCallback A closure function to call when the click event happened outside of the rootElement.
  */
 export const closeWhenClickedOutside = (event: MouseEvent, rootElement: HTMLElement, closeCallback: () => void) => {
-	// We walk up the tree to see if any parent of the clicked element is the root element.
-	// If it is not, we call the close callback. We're doing all this hassle to only call the
-	// closing callback when a click happens outside of the rootElement.
-	let parent = (event.target as HTMLElement)?.parentElement
-	while (parent !== rootElement) {
-		if (parent === null || parent.parentElement === null) {
-			parent = null
-			break
-		}
+	// Use composedPath() to get the full event path including elements inside Shadow DOM.
+	// This ensures clicks inside shadow roots (like emoji-picker-element) are detected correctly.
+	const path = event.composedPath()
 
-		parent = parent.parentElement
-	}
-
-	if (parent === rootElement) {
+	if (path.includes(rootElement)) {
 		return
 	}