diff --git a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
index 1f24fe5154..b4810a8d4b 100644
--- a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
+++ b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
@@ -1,27 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/AtMention should match snapshot when mentioning a group that is allowed reference 1`] = `
-<span>
-  <Memo(AtMentionGroup)
-    group={
-      Object {
-        "allow_reference": true,
-        "create_at": 1,
-        "delete_at": 0,
-        "description": "",
-        "display_name": "group_display_name",
-        "has_syncables": false,
-        "id": "qwerty1",
-        "member_count": 0,
-        "name": "developers",
-        "remote_id": "",
-        "scheme_admin": false,
-        "source": "",
-        "update_at": 1,
+exports[`components/AtMention should match snapshot when mentioning a group followed by punctuation 1`] = `
+<Fragment>
+  <span>
+    <Memo(AtMentionGroup)
+      group={
+        Object {
+          "allow_reference": true,
+          "create_at": 1,
+          "delete_at": 0,
+          "description": "",
+          "display_name": "group_display_name",
+          "has_syncables": false,
+          "id": "qwerty1",
+          "member_count": 0,
+          "name": "developers",
+          "remote_id": "",
+          "scheme_admin": false,
+          "source": "",
+          "update_at": 1,
+        }
       }
-    }
-  />
-</span>
+    />
+  </span>
+  .
+</Fragment>
+`;
+
+exports[`components/AtMention should match snapshot when mentioning a group that is allowed reference 1`] = `
+<Fragment>
+  <span>
+    <Memo(AtMentionGroup)
+      group={
+        Object {
+          "allow_reference": true,
+          "create_at": 1,
+          "delete_at": 0,
+          "description": "",
+          "display_name": "group_display_name",
+          "has_syncables": false,
+          "id": "qwerty1",
+          "member_count": 0,
+          "name": "developers",
+          "remote_id": "",
+          "scheme_admin": false,
+          "source": "",
+          "update_at": 1,
+        }
+      }
+    />
+  </span>
+</Fragment>
 `;
 
 exports[`components/AtMention should match snapshot when mentioning a group that is allowed reference with group highlight disabled 1`] = `
diff --git a/webapp/channels/src/components/at_mention/at_mention.test.tsx b/webapp/channels/src/components/at_mention/at_mention.test.tsx
index 5301a1c681..495b56dae5 100644
--- a/webapp/channels/src/components/at_mention/at_mention.test.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.test.tsx
@@ -214,6 +214,19 @@ describe('components/AtMention', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should match snapshot when mentioning a group followed by punctuation', () => {
+        const wrapper = shallow<AtMention>(
+            <AtMention
+                {...baseProps}
+                mentionName='developers.'
+            >
+                {'(at)-developers.'}
+            </AtMention>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
     test('should have placement state based on ref position of click handler', () => {
         const wrapper = shallow<AtMention>(
             <AtMention
diff --git a/webapp/channels/src/components/at_mention/at_mention.tsx b/webapp/channels/src/components/at_mention/at_mention.tsx
index 530a3d1413..3ea505c576 100644
--- a/webapp/channels/src/components/at_mention/at_mention.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.tsx
@@ -90,10 +90,18 @@ export default class AtMention extends React.PureComponent<Props, State> {
 
         if (!this.props.disableGroupHighlight && !user) {
             const group = getUserOrGroupFromMentionName(this.props.groupsByName, this.props.mentionName) as Group | '';
+
             if (group && group.allow_reference) {
-                return (<span>
-                    <AtMentionGroup group={group}/>
-                </span>);
+                const suffix = this.props.mentionName.substring(group.name.length);
+
+                return (
+                    <>
+                        <span>
+                            <AtMentionGroup group={group}/>
+                        </span>
+                        {suffix}
+                    </>
+                );
             }
         }