diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index c95f06c7e..c7e1d1ca8 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -125,6 +125,11 @@ const MentionExample = () => {
             {chars.map((char, i) => (
               <div
                 key={char}
+                onClick={() => {
+                  Transforms.select(editor, target)
+                  insertMention(editor, char)
+                  setTarget(null)
+                }}
                 style={{
                   padding: '1px 3px',
                   borderRadius: '3px',
@@ -228,7 +233,8 @@ const Mention = ({ attributes, children, element }) => {
       data-cy={`mention-${element.character.replace(' ', '-')}`}
       style={style}
     >
-      {children}@{element.character}
+      @{element.character}
+      {children}
     </span>
   )
 }