provide container and boundaries for Popover via computed properties

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 38 insertions, 6 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 5bd27f0b1..54dc4304e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -77,6 +77,7 @@ describe('Message.vue', () => {
 				bottom: 0,
 				left: 0,
 			},
+			getMessagesListScroller: jest.fn(),
 		}
 
 		testStoreConfig = cloneDeep(storeConfig)
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
index f9c3972fc..45c5e855a 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
@@ -18,6 +18,7 @@ describe('MessageButtonsBar.vue', () => {
 	let testStoreConfig
 	let store
 	let messageProps
+	let injected
 	let conversationProps
 	let getActorTypeMock
 
@@ -87,6 +88,20 @@ describe('MessageButtonsBar.vue', () => {
 
 		beforeEach(() => {
 			store = new Store(testStoreConfig)
+
+			injected = {
+				scrollerBoundingClientRect: {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0,
+					top: 0,
+					right: 0,
+					bottom: 0,
+					left: 0,
+				},
+				getMessagesListScroller: jest.fn(),
+			}
 		})
 
 		describe('reply action', () => {
@@ -103,6 +118,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const replyButton = findNcButton(wrapper, 'Reply')
@@ -137,6 +153,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const replyButton = findNcButton(wrapper, 'Reply')
@@ -165,6 +182,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcActionButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const actionButton = findNcActionButton(wrapper, 'Reply privately')
@@ -199,6 +217,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcActionButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const actionButton = findNcActionButton(wrapper, 'Reply privately')
@@ -243,6 +262,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcActionButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const actionButton = findNcActionButton(wrapper, 'Delete')
@@ -278,6 +298,7 @@ describe('MessageButtonsBar.vue', () => {
 						NcActionButton,
 					},
 					propsData: messageProps,
+					provide: injected,
 				})
 
 				const actionButton = findNcActionButton(wrapper, 'Delete')
@@ -356,6 +377,7 @@ describe('MessageButtonsBar.vue', () => {
 				},
 
 				propsData: messageProps,
+				provide: injected,
 			})
 
 			const actionButton = findNcActionButton(wrapper, 'Mark as unread')
@@ -397,6 +419,7 @@ describe('MessageButtonsBar.vue', () => {
 				},
 
 				propsData: messageProps,
+				provide: injected,
 			})
 
 			Object.assign(navigator, {
@@ -435,6 +458,7 @@ describe('MessageButtonsBar.vue', () => {
 					NcActionButton,
 				},
 				propsData: messageProps,
+				provide: injected,
 			})
 
 			const actionButton = findNcActionButton(wrapper, 'first action')
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 18558d8cf..51287a209 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -42,9 +42,9 @@
 				</template>
 			</NcButton>
 			<NcActions :force-menu="true"
-				:container="`#message_${id}`"
 				placement="bottom-end"
-				:boundaries-element="containerElement"
+				:container="messageContainer"
+				:boundaries-element="boundariesElement"
 				@open="onMenuOpen"
 				@close="onMenuClose">
 				<NcActionButton>
@@ -143,8 +143,8 @@
 				</template>
 			</NcButton>
 
-			<NcEmojiPicker :container="`#message_${id} .message-buttons-bar`"
-				:boundary="containerElement"
+			<NcEmojiPicker :container="`${messageContainer} .message-buttons-bar`"
+				:boundary="boundariesElement"
 				placement="auto"
 				@select="handleReactionClick"
 				@after-show="onEmojiPickerOpen"
@@ -223,6 +223,8 @@ export default {
 		Translate,
 	},
 
+	inject: ['getMessagesListScroller'],
+
 	props: {
 		token: {
 			type: String,
@@ -384,8 +386,12 @@ export default {
 			return this.$store.getters.conversation(this.token)
 		},
 
-		containerElement() {
-			return document.querySelector('.messages-list__scroller')
+		messageContainer() {
+			return `#message_${this.id}`
+		},
+
+		boundariesElement() {
+			return this.getMessagesListScroller()
 		},
 
 		isDeleteable() {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index a44aac580..c58895278 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -93,6 +93,7 @@ export default {
 	provide() {
 		return {
 			scrollerBoundingClientRect: computed(() => this.$refs.scroller.getBoundingClientRect()),
+			getMessagesListScroller: () => this.$refs.scroller,
 		}
 	},