diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index ab080f32cd..3aedbd4d92 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -502,10 +502,8 @@ export default class SendMessageComposer extends React.Component {
             member.rawDisplayName : userId;
         const caret = this._editorRef.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // createMentionParts() assumes that the mention already has it's own part
-        // which isn't true, therefore we increase the position.index by 1. This
-        // also solves the problem of the index being -1 when the composer is empty.
-        const parts = partCreator.createMentionParts(position.index + 1, displayName, userId);
+        // Insert suffix only if the caret is at the start of the composer
+        const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
         model.transform(() => {
             const addedLen = model.insert(parts, position);
             return model.positionForOffset(caret.offset + addedLen, true);
diff --git a/src/editor/autocomplete.ts b/src/editor/autocomplete.ts
index 2f56494ea0..240ed2d96b 100644
--- a/src/editor/autocomplete.ts
+++ b/src/editor/autocomplete.ts
@@ -125,10 +125,8 @@ export default class AutocompleteWrapperModel {
             case "at-room":
                 return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)];
             case "user":
-                // not using suffix here, because we also need to calculate
-                // the suffix when clicking a display name to insert a mention,
-                // which happens in createMentionParts
-                return this.partCreator.createMentionParts(this.partIndex, text, completionId);
+                // Insert suffix only if the pill is the part with index 0 - we are at the start of the composer
+                return this.partCreator.createMentionParts(this.partIndex === 0, text, completionId);
             case "command":
                 // command needs special handling for auto complete, but also renders as plain texts
                 return [(this.partCreator as CommandPartCreator).command(text)];
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index ccd90da3e2..9fd7e289ae 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -543,9 +543,9 @@ export class PartCreator {
         return new UserPillPart(userId, displayName, member);
     }
 
-    createMentionParts(partIndex: number, displayName: string, userId: string) {
+    createMentionParts(insertTrailingCharacter: boolean, displayName: string, userId: string) {
         const pill = this.userPill(displayName, userId);
-        const postfix = this.plain(partIndex === 0 ? ": " : " ");
+        const postfix = this.plain(insertTrailingCharacter ? ": " : " ");
         return [pill, postfix];
     }
 }