Use conditional rendering only to show and hide the MessageButtonsBar component

Signed-off-by: marco <marcoambrosini@pm.me>

2 files changed, 23 insertions, 25 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 519eec383..b08ff8f71 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -563,7 +563,7 @@ describe('Message.vue', () => {
 			expect(messageButtonsBar.exists()).toBe(false)
 		})
 
-		test('Buttons bar becomes visible on mouse over', async () => {
+		test('Buttons bar is rendered on mouse over', async () => {
 			messageProps.sendingFailure = 'timeout'
 			const wrapper = mount(Message, {
 				localVue,
@@ -571,26 +571,23 @@ describe('Message.vue', () => {
 				propsData: messageProps,
 			})
 
-			await wrapper.vm.$nextTick()
-
-			const messageButtonsBar = wrapper.findComponent(MessageButtonsBar)
-
+			// Initial state
 			expect(wrapper.vm.showMessageButtonsBar).toBe(false)
-			expect(messageButtonsBar.isVisible()).toBe(false)
+			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(false)
 
+			// Mouseover
 			await wrapper.find('.message').trigger('mouseover')
-
 			expect(wrapper.vm.showMessageButtonsBar).toBe(true)
-			expect(messageButtonsBar.isVisible()).toBe(true)
-
-			await wrapper.find('.message').trigger('mouseleave')
+			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true)
 
-			expect(wrapper.vm.showMessageButtonsBar).toBe(false)
-			expect(messageButtonsBar.isVisible()).toBe(false)
-
-			// actions are always present and rendered
+			// actions are present and rendered when the buttonsBar is renderend
 			const actions = wrapper.findAllComponents({ name: 'Actions' })
 			expect(actions.length).toBe(2)
+
+			// Mouseleave
+			await wrapper.find('.message').trigger('mouseleave')
+			expect(wrapper.vm.showMessageButtonsBar).toBe(false)
+			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(false)
 		})
 	})
 
@@ -616,6 +613,9 @@ describe('Message.vue', () => {
 				propsData: messageProps,
 			})
 
+			// Hover the messages in order to render the MessageButtonsBar
+			// component
+			await wrapper.find('.message').trigger('mouseover')
 			wrapper.find(MessageButtonsBar).vm.$emit('delete')
 
 			expect(deleteMessage).toHaveBeenCalledWith(expect.anything(), {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index ab3272a47..13fce0b84 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -147,8 +147,7 @@ the main body of the message as well as a quote.
 		</div>
 
 		<!-- Message actions -->
-		<MessageButtonsBar v-if="hasMessageButtonsBar"
-			v-show="showMessageButtonsBar || isActionMenuOpen || isEmojiPickerOpen"
+		<MessageButtonsBar v-if="showMessageButtonsBar"
 			ref="messageButtonsBar"
 			:is-action-menu-open.sync="isActionMenuOpen"
 			:is-emoji-picker-open.sync="isEmojiPickerOpen"
@@ -351,7 +350,7 @@ export default {
 
 	data() {
 		return {
-			showMessageButtonsBar: false,
+			isHovered: false,
 			// Is tall enough for both actions and date upon hovering
 			isTallEnough: false,
 			showReloadButton: false,
@@ -506,11 +505,11 @@ export default {
 				return false
 			}
 
-			return this.isSystemMessage || !this.showMessageButtonsBar || this.isTallEnough
+			return this.isSystemMessage || !this.isHovered || this.isTallEnough
 		},
 
-		hasMessageButtonsBar() {
-			return !this.isSystemMessage && !this.isTemporary
+		showMessageButtonsBar() {
+			return !this.isSystemMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen)
 		},
 
 		isTemporaryUpload() {
@@ -620,8 +619,8 @@ export default {
 		},
 
 		handleMouseover() {
-			if (!this.showMessageButtonsBar) {
-				this.showMessageButtonsBar = true
+			if (!this.isHovered) {
+				this.isHovered = true
 			}
 		},
 
@@ -632,9 +631,8 @@ export default {
 		},
 
 		handleMouseleave() {
-			// We leave the buttonsbar visible if the actions menu is open
-			if (this.showMessageButtonsBar) {
-				this.showMessageButtonsBar = false
+			if (this.isHovered) {
+				this.isHovered = false
 			}
 		},