Merge pull request #34320 from nextcloud/backport/34308/stable25

[stable25] Fix user status emoji picking

apps/user_status/src/components/CustomMessageInput.vue

@@ -48,11 +48,17 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 export default {
 	name: 'CustomMessageInput',
+
 	components: {
 		NcButton,
 		NcEmojiPicker,
 	},
+
 	props: {
+		icon: {
+			type: String,
+			default: '😀',
+		},
 		message: {
 			type: String,
 			required: true,
@@ -63,11 +69,13 @@ export default {
 			default: false,
 		},
 	},
+
 	emits: [
 		'change',
 		'submit',
 		'icon-selected',
 	],
+
 	computed: {
 		/**
 		 * Returns the user-set icon or a smiley in case no icon is set
@@ -78,6 +86,7 @@ export default {
 			return this.icon || '😀'
 		},
 	},
+
 	methods: {
 		focus() {
 			this.$refs.input.focus()
@@ -96,8 +105,8 @@ export default {
 			this.$emit('submit', event.target.value)
 		},
 
-		setIcon(event) {
-			this.$emit('icon-selected', event)
+		setIcon(icon) {
+			this.$emit('select-icon', icon)
 		},
 	},
 }

apps/user_status/src/components/SetStatusModal.vue

@@ -42,10 +42,11 @@
 			</div>
 			<div class="set-status-modal__custom-input">
 				<CustomMessageInput ref="customMessageInput"
+					:icon="icon"
 					:message="message"
 					@change="setMessage"
 					@submit="saveStatus"
-					@iconSelected="setIcon" />
+					@select-icon="setIcon" />
 			</div>
 			<PredefinedStatusesList @select-status="selectPredefinedMessage" />
 			<ClearAtSelect :clear-at="clearAt"
@@ -74,12 +75,12 @@
 import { showError } from '@nextcloud/dialogs'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import { getAllStatusOptions } from '../services/statusOptionsService'
-import OnlineStatusMixin from '../mixins/OnlineStatusMixin'
-import PredefinedStatusesList from './PredefinedStatusesList'
-import CustomMessageInput from './CustomMessageInput'
-import ClearAtSelect from './ClearAtSelect'
-import OnlineStatusSelect from './OnlineStatusSelect'
+import { getAllStatusOptions } from '../services/statusOptionsService.js'
+import OnlineStatusMixin from '../mixins/OnlineStatusMixin.js'
+import PredefinedStatusesList from './PredefinedStatusesList.vue'
+import CustomMessageInput from './CustomMessageInput.vue'
+import ClearAtSelect from './ClearAtSelect.vue'
+import OnlineStatusSelect from './OnlineStatusSelect.vue'
 
 export default {
 	name: 'SetStatusModal',