(UI) close menu and reaction when scrolling

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -132,7 +132,7 @@
 						:roomFooterRef="roomFooterRef"
 						:positionRight="message.sender_id === currentUserId"
 						@addEmoji="sendMessageReaction"
-						@openEmoji="emojiOpened = $event"
+						@openEmoji="openEmoji"
 					></emoji-picker>
 
 					<transition
@@ -211,7 +211,8 @@ export default {
 		roomFooterRef: { type: HTMLDivElement },
 		newMessages: { type: Array },
 		showReactionEmojis: { type: Boolean, required: true },
-		emojisList: { type: Object, required: true }
+		emojisList: { type: Object, required: true },
+		hideOptions: { type: Boolean, required: true }
 	},
 
 	data() {
@@ -243,6 +244,12 @@ export default {
 		},
 		emojiOpened(val) {
 			if (val) this.optionsOpened = false
+		},
+		hideOptions(val) {
+			if (val) {
+				this.closeEmoji()
+				this.closeOptions()
+			}
 		}
 	},
 
@@ -362,6 +369,8 @@ export default {
 
 			if (!this.optionsOpened) return
 
+			this.$emit('hideOptions', false)
+
 			setTimeout(() => {
 				if (!this.roomFooterRef || !this.$refs.menuOptions || !this.actionIcon)
 					return
@@ -383,6 +392,10 @@ export default {
 			this.optionsOpened = false
 			if (this.hoverMessageId !== this.message._id) this.messageHover = false
 		},
+		openEmoji(ev) {
+			this.emojiOpened = ev
+			this.$emit('hideOptions', false)
+		},
 		closeEmoji() {
 			this.emojiOpened = false
 			if (this.hoverMessageId !== this.message._id) this.messageHover = false

src/ChatWindow/MessagesList.vue

@@ -63,10 +63,12 @@
 							:newMessages="newMessages"
 							:showReactionEmojis="showReactionEmojis"
 							:emojisList="emojisList"
+							:hideOptions="hideOptions"
 							@messageActionHandler="messageActionHandler"
 							@openFile="openFile"
 							@addNewMessage="addNewMessage"
 							@sendMessageReaction="sendMessageReaction"
+							@hideOptions="hideOptions = $event"
 						></chat-message>
 					</div>
 				</transition-group>
@@ -230,6 +232,7 @@ export default {
 			menuOpened: false,
 			emojiOpened: false,
 			emojisList: {},
+			hideOptions: true,
 			scrollIcon: false,
 			newMessages: []
 		}
@@ -245,6 +248,7 @@ export default {
 		document
 			.getElementsByClassName('container-scroll')[0]
 			.addEventListener('scroll', e => {
+				this.hideOptions = true
 				this.scrollIcon =
 					e.target.scrollHeight > 500 &&
 					e.target.scrollHeight - e.target.scrollTop > 1000