Merge pull request #1136 from nextcloud/hotfix/emoji-status-search

fix(user-status): emoji picker cannot be focused
nextcloud · Feb 24, 2025 · 6434a20 · 6434a20
2 parents 45d7f29 + c8e607d
commit 6434a20
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue b/src/talk/renderer/UserStatus/components/UserStatusFormCustomMessage.vue
@@ -24,11 +24,14 @@ const emit = defineEmits<{
 	(event: 'update:icon', value: string | null): void,
 	(event: 'update:message', value: string | null): void,
 }>()
+
+// TODO: Vue 3 - replace with `useId`
+const id = Math.random().toString(36).slice(2, 8)
 </script>
 
 <template>
-	<div class="user-status-form-custom-message">
-		<NcEmojiPicker @select="emit('update:icon', $event)">
+	<div :id="id" class="user-status-form-custom-message">
+		<NcEmojiPicker :container="'#' + id" @select="emit('update:icon', $event)">
 			<NcButton :aria-label="t('talk_desktop', 'Emoji for your status message')" type="tertiary" :disabled="disabled">
 				<template #icon>
 					<template v-if="icon">