fix(NewMessage): rewrite tributes re-rendering

Signed-off-by: Maksim Sukharev <[email protected]>

[skip ci]

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -6,14 +6,11 @@
 <template>
 	<NcDialog ref="modal"
 		:name="dialogTitle"
-		:container="container"
 		close-on-click-outside
 		size="normal"
 		v-on="$listeners"
 		@update:open="$emit('close')">
-		<NewMessage v-if="modalContainerId"
-			:key="modalContainerId"
-			ref="newMessage"
+		<NewMessage ref="newMessage"
 			role="region"
 			class="send-message-dialog"
 			:token="token"
@@ -78,10 +75,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		dialogTitle() {
 			return this.broadcast
 				? t('spreed', 'Send a message to all breakout rooms')

src/components/ChatView.vue

@@ -46,11 +46,8 @@
 		</div>
 
 		<!-- Input field -->
-		<NewMessage v-if="containerId"
-			:key="containerId"
-			role="region"
+		<NewMessage role="region"
 			:token="token"
-			:container="containerId"
 			has-typing-indicator
 			:aria-label="t('spreed', 'Post message')" />
 
@@ -113,7 +110,6 @@ export default {
 		return {
 			isChatScrolledToBottom: true,
 			isDraggingOver: false,
-			containerId: undefined,
 		}
 	},
 
@@ -163,26 +159,11 @@ export default {
 			return this.$store.getters.conversation(this.token)
 		},
 
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		isLoadingChat() {
 			return !this.$store.getters.isMessagesListPopulated(this.token)
 		},
 	},
 
-	watch: {
-		container(value) {
-			this.containerId = value
-		},
-	},
-
-	mounted() {
-		// Postpone render of NewMessage until application is mounted
-		this.containerId = this.container
-	},
-
 	methods: {
 		t,
 

src/components/NewMessage/NewMessage.vue

@@ -23,8 +23,6 @@
 			<!-- Attachments menu -->
 			<NewMessageAttachments v-if="showAttachmentsMenu"
 				:token="token"
-				:container="container"
-				:boundaries-element="containerElement"
 				:disabled="disabled"
 				:can-upload-files="canUploadFiles"
 				:can-share-files="canShareFiles"
@@ -42,7 +40,6 @@
 
 				<div class="new-message-form__emoji-picker">
 					<NcEmojiPicker v-if="!disabled"
-						:container="container"
 						:close-on-select="false"
 						@select="addEmoji">
 						<NcButton :disabled="disabled"
@@ -74,6 +71,7 @@
 					type="warning"
 					:text="t('spreed','Adding a mention will only notify users who did not read the message.')" />
 				<NcRichContenteditable ref="richContenteditable"
+					:key="container"
 					:value.sync="text"
 					:auto-complete="autoComplete"
 					:disabled="disabled"
@@ -120,7 +118,7 @@
 
 			<!-- Send buttons -->
 			<template v-else>
-				<NcActions v-if="!broadcast" :container="container" force-menu>
+				<NcActions v-if="!broadcast" force-menu>
 					<template #icon>
 						<BellOffIcon v-if="silentChat" :size="16" />
 					</template>
@@ -156,13 +154,11 @@
 		<!-- New file creation dialog -->
 		<NewMessageNewFileDialog v-if="showNewFileDialog !== -1"
 			:token="token"
-			:container="container"
 			:show-new-file-dialog="showNewFileDialog"
 			@dismiss="showNewFileDialog = -1" />
 
 		<FilePickerVue v-if="showFilePicker"
 			:name="t('spreed', 'File to share')"
-			:container="container"
 			:buttons="filePickerButtons"
 			allow-pick-directory
 			@close="showFilePicker = false" />
@@ -251,11 +247,10 @@ export default {
 
 		/**
 		 * Selector for popovers and pickers to be rendered inside container properly.
-		 * Container must be mounted before passing its ID as a prop
 		 */
 		container: {
 			type: String,
-			required: true,
+			default: undefined,
 		},
 
 		/**

src/components/NewMessage/NewMessageAttachments.vue

@@ -5,8 +5,6 @@
 
 <template>
 	<NcActions ref="attachmentsMenu"
-		:container="container"
-		:boundaries-element="boundariesElement"
 		:disabled="disabled"
 		:force-menu="true"
 		:aria-label="t('spreed', 'Share files to the conversation')"
@@ -100,16 +98,6 @@ export default {
 			required: true,
 		},
 
-		container: {
-			type: String,
-			required: true,
-		},
-
-		boundariesElement: {
-			type: Element,
-			required: true,
-		},
-
 		disabled: {
 			type: Boolean,
 			required: true,

src/components/NewMessage/NewMessageNewFileDialog.vue

@@ -6,7 +6,6 @@
 <template>
 	<NcDialog :name="t('spreed', 'Create and share a new file')"
 		size="large"
-		:container="container"
 		class="templates-picker"
 		close-on-click-outside
 		@update:open="closeModal">
@@ -81,11 +80,6 @@ export default {
 			required: true,
 		},
 
-		container: {
-			type: String,
-			required: true,
-		},
-
 		showNewFileDialog: {
 			type: Number,
 			required: true,

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -8,7 +8,6 @@
 		ref="modal"
 		:size="isVoiceMessage ? 'small' : 'normal'"
 		:close-on-click-outside="false"
-		:container="container"
 		:label-id="dialogHeaderId"
 		@close="handleDismiss">
 		<div class="upload-editor"
@@ -62,8 +61,7 @@
 					{{ t('spreed', 'Send') }}
 				</NcButton>
 			</div>
-			<NewMessage v-else-if="modalContainerId"
-				:key="modalContainerId"
+			<NewMessage v-else
 				ref="newMessage"
 				role="region"
 				class="upload-editor__textfield"
@@ -142,10 +140,6 @@ export default {
 			return !!this.currentUploadId
 		},
 
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		addMoreAriaLabel() {
 			return t('spreed', 'Add more files')
 		},
@@ -181,10 +175,9 @@ export default {
 		async showModal(show) {
 			if (show) {
 				// Wait for modal content to be rendered
-				await this.getContainerId()
+				await this.$nextTick()
+				this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
 				if (this.supportMediaCaption) {
-					// Wait for NewMessage to be rendered after containerId is set
-					await this.$nextTick()
 					this.$refs.newMessage.focusInput()
 				} else {
 					this.$refs.submitButton.$el.focus()
@@ -195,11 +188,6 @@ export default {
 
 	methods: {
 		t,
-		async getContainerId() {
-			await this.$nextTick()
-			// Postpone render of NewMessage until modal container is mounted
-			this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
-		},
 
 		handleDismiss() {
 			this.$store.dispatch('discardUpload', this.currentUploadId)