Merge pull request #2710 from nextcloud/fix-autocompletion-issuesv8.0.0-alpha.4

Increase the max height of the mention suggestion to 4.5 mentions ins…

3 files changed, 19 insertions, 7 deletions

diff --git a/css/At.scss b/css/At.scss
index 4443fa18b..b473e36eb 100644
--- a/css/At.scss
+++ b/css/At.scss
@@ -114,6 +114,12 @@
 		max-width: unset;
 	}
 
+	// Override max height to show 4.5 mentions to make clear you can scroll for more options
+	.atwho-ul {
+		// (padding top: 6 + avatar height: 32 + padding bottom: 6) * visible mentions: 4.5
+		max-height: 198px;
+	}
+
 	// Override autocompletion panel items height, as they are too short
 	// for the avatars and also need some padding.
 	.atwho-li {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 5b2c317e4..c7567e7fa 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -287,12 +287,10 @@ export default {
 				return PlainText
 			} else if (messagePartType === 'user') {
 				return Mention
-			// FIXME Reenable once the UserBubble allows non-users
-			// FIXME Ref: https://github.com/nextcloud/nextcloud-vue/issues/796
-			// } else if (messagePartType === 'call') {
-			// return Mention
-			// } else if (messagePartType === 'guest') {
-			// return Mention
+			} else if (messagePartType === 'call') {
+				return Mention
+			} else if (messagePartType === 'guest') {
+				return Mention
 			} else if (messagePartType === 'file') {
 				return FilePreview
 			}
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index bf63e01d4..3c5df76f1 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -38,7 +38,7 @@
 				{{ getFirstLetterOfGuestName(scope.item.label) }}
 			</div>
 			<Avatar v-else
-				:user="scope.item.id"
+				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
 				:display-name="scope.item.label"
 				:disable-tooltip="true"
 				:disable-menu="true" />
@@ -195,6 +195,13 @@ export default {
 			return true
 		},
 
+		atRemoveQuotesFromUserIdForAvatars(userId) {
+			if (userId.startsWith('"')) {
+				return userId.substring(1, userId.length - 1)
+			}
+			return userId
+		},
+
 		/**
 		 * Focuses the contenteditable div input
 		 */
@@ -207,6 +214,7 @@ export default {
 				}, 0)
 			}
 		},
+
 		/**
 		 * Emits the submit event when enter is pressed (look
 		 * at the v-on in the template) unless shift is pressed: