Merge pull request #8996 from nextcloud/fix/8915/adjust-emoji-picker-visibility

Add container context for `NewMessageForm`

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -20,14 +20,16 @@
 -->
 
 <template>
-	<NcModal v-on="$listeners">
+	<NcModal ref="modal" v-on="$listeners">
 		<div class="send-message-dialog">
 			<h2 class="send-message-dialog__title">
 				{{ dialogTitle }}
 			</h2>
-			<NewMessageForm role="region"
+			<NewMessageForm v-if="modalContainerId"
+				role="region"
 				:token="token"
 				:breakout-room="true"
+				:container-id="modalContainerId"
 				:aria-label="t('spreed', 'Post message')"
 				:broadcast="broadcast"
 				@sent="handleMessageSent"
@@ -79,6 +81,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			modalContainerId: null,
+		}
+	},
+
 	computed: {
 		dialogTitle() {
 			return this.broadcast
@@ -87,6 +95,11 @@ export default {
 		},
 	},
 
+	mounted() {
+		// Postpone render of NewMessageForm until modal container is mounted
+		this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
+	},
+
 	methods: {
 		handleMessageSent() {
 			showSuccess(this.broadcast
@@ -111,4 +124,10 @@ export default {
 		margin-bottom: 0;
 	}
 }
+
+:deep(.modal-container) {
+	// Fix visibility for popovers, like EmojiPicker
+	overflow: visible !important;
+}
+
 </style>

src/components/NewMessageForm/NewMessageForm.vue

@@ -119,6 +119,7 @@
 						:auto-complete="autoComplete"
 						:disabled="disabled"
 						:user-data="userData"
+						:menu-container="containerElement"
 						:placeholder="placeholderText"
 						:aria-label="placeholderText"
 						@shortkey="focusInput"
@@ -169,7 +170,7 @@
 		<!-- Text file creation dialog -->
 		<NcModal v-if="showTextFileDialog !== false"
 			size="normal"
-			:container="$store.getters.getMainContainerSelector()"
+			:container="container"
 			class="templates-picker"
 			@close="dismissTextFileCreation">
 			<div class="new-text-file">
@@ -306,6 +307,15 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * When this component is used to send message to a breakout room we
+		 * pass an id of modal containing component to render properly.
+		 */
+		containerId: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Broadcast messages to all breakout rooms of a given conversation.
 		 */
@@ -399,11 +409,13 @@ export default {
 		},
 
 		container() {
-			return this.$store.getters.getMainContainerSelector()
+			return this.containerId ?? this.$store.getters.getMainContainerSelector()
 		},
 
 		containerElement() {
-			return document.querySelector(this.container)
+			// TODO can't find DOM element by #content-vue. undefined is passed
+			//  for NcRichContenteditable to use 'document.body' by default
+			return document.querySelector(this.container) ?? undefined
 		},
 
 		isOneToOne() {