From 2077ffca23f612740e316367f560165cbfb931ed Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Wed, 7 Feb 2024 10:09:16 +0100
Subject: [PATCH] fix(Participant): Add key in order to force re-rendering

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../Participant/Participant.vue               | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index ebb2cfa8655..bc7afc93e66 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -149,6 +149,7 @@
 			<!-- Grant or revoke lobby permissions (inline button) -->
 			<template v-if="showToggleLobbyAction">
 				<NcActionButton v-if="canSkipLobby"
+					key="lobby-permission-skip"
 					close-after-click
 					@click="setLobbyPermission(false)">
 					<template #icon>
@@ -157,6 +158,7 @@
 					{{ t('spreed', 'Move back to lobby') }}
 				</NcActionButton>
 				<NcActionButton v-else
+					key="lobby-permission-join"
 					close-after-click
 					@click="setLobbyPermission(true)">
 					<template #icon>
@@ -167,6 +169,7 @@
 			</template>
 			<!-- Grant or revoke moderator permissions -->
 			<NcActionButton v-if="canBeDemoted"
+				key="demote-moderator"
 				close-after-click
 				@click="demoteFromModerator">
 				<template #icon>
@@ -175,6 +178,7 @@
 				{{ t('spreed', 'Demote from moderator') }}
 			</NcActionButton>
 			<NcActionButton v-else-if="canBePromoted"
+				key="promote-moderator"
 				close-after-click
 				@click="promoteToModerator">
 				<template #icon>
@@ -183,6 +187,7 @@
 				{{ t('spreed', 'Promote to moderator') }}
 			</NcActionButton>
 			<NcActionButton v-if="canBeModerated && isEmailActor"
+				key="resend-invitation"
 				close-after-click
 				@click="resendInvitation">
 				<template #icon>
@@ -191,6 +196,7 @@
 				{{ t('spreed', 'Resend invitation') }}
 			</NcActionButton>
 			<NcActionButton v-if="canSendCallNotification"
+				key="send-call-notification"
 				close-after-click
 				@click="sendCallNotification">
 				<template #icon>
@@ -200,6 +206,7 @@
 			</NcActionButton>
 			<template v-if="canBeModerated && isPhoneActor">
 				<NcActionButton v-if="!conversation.hasCall && !isInCall && !participant.callId"
+					key="dial-out-phone-number"
 					close-after-click
 					@click="dialOutPhoneNumber">
 					<template #icon>
@@ -209,6 +216,7 @@
 				</NcActionButton>
 				<template v-else-if="isInCall && participant.callId">
 					<NcActionButton v-if="phoneMuteState === 'hold'"
+						key="resume-call-phone-number"
 						close-after-click
 						@click="unmutePhoneNumber">
 						<template #icon>
@@ -217,7 +225,8 @@
 						{{ t('spreed', 'Resume call for phone number') }}
 					</NcActionButton>
 					<template v-else>
-						<NcActionButton close-after-click
+						<NcActionButton key="hold-call-phone-number"
+							close-after-click
 							@click="holdPhoneNumber">
 							<template #icon>
 								<PhonePaused :size="20" />
@@ -225,6 +234,7 @@
 							{{ t('spreed', 'Put phone number on hold') }}
 						</NcActionButton>
 						<NcActionButton v-if="phoneMuteState === 'muted'"
+							key="unmute-call-phone-number"
 							close-after-click
 							@click="unmutePhoneNumber">
 							<template #icon>
@@ -233,6 +243,7 @@
 							{{ t('spreed', 'Unmute phone number') }}
 						</NcActionButton>
 						<NcActionButton v-else
+							key="mute-call-phone-number"
 							close-after-click
 							@click="mutePhoneNumber">
 							<template #icon>
@@ -242,7 +253,8 @@
 						</NcActionButton>
 					</template>
 				</template>
-				<NcActionButton close-after-click
+				<NcActionButton key="copy-phone-number"
+					close-after-click
 					@click="copyPhoneNumber">
 					<template #icon>
 						<ContentCopy :size="20" />
@@ -255,6 +267,7 @@
 			<template v-if="showPermissionsOptions">
 				<NcActionSeparator />
 				<NcActionButton v-if="hasNonDefaultPermissions"
+					key="reset-permissions"
 					close-after-click
 					@click="applyDefaultPermissions">
 					<template #icon>
@@ -262,21 +275,24 @@
 					</template>
 					{{ t('spreed', 'Reset custom permissions') }}
 				</NcActionButton>
-				<NcActionButton close-after-click
+				<NcActionButton key="grant-all-permissions"
+					close-after-click
 					@click="grantAllPermissions">
 					<template #icon>
 						<LockOpenVariant :size="20" />
 					</template>
 					{{ t('spreed', 'Grant all permissions') }}
 				</NcActionButton>
-				<NcActionButton close-after-click
+				<NcActionButton key="remove-all-permissions"
+					close-after-click
 					@click="removeAllPermissions">
 					<template #icon>
 						<Lock :size="20" />
 					</template>
 					{{ t('spreed', 'Remove all permissions') }}
 				</NcActionButton>
-				<NcActionButton close-after-click
+				<NcActionButton key="edit-permissions"
+					close-after-click
 					@click="showPermissionsEditor">
 					<template #icon>
 						<Pencil :size="20" />
@@ -288,6 +304,7 @@
 			<!-- Remove -->
 			<NcActionSeparator v-if="canBeModerated && showPermissionsOptions" />
 			<NcActionButton v-if="canBeModerated"
+				key="remove-participant"
 				close-after-click
 				@click="removeParticipant">
 				<template #icon>