diff --git a/src/components/ComposerQuill/composer.js b/src/components/ComposerQuill/composer.js
index 95e5ff4..3c9fa8a 100644
--- a/src/components/ComposerQuill/composer.js
+++ b/src/components/ComposerQuill/composer.js
@@ -125,6 +125,16 @@ class Composer extends React.Component {
         placeholder,
       });
 
+      this.quillMention = this.quill.getModule('mention');
+      const originalHighlightItem = this.quillMention.highlightItem;
+
+      const {onMentionFocus} = this.props;
+
+      this.quillMention.highlightItem = function(...args) {
+        onMentionFocus(this.itemIndex);
+        originalHighlightItem.apply(this, args);
+      };
+
       // inserts the initial text to the composer
       // may contain formats as html tags, so convert those to markdowns
       if (typeof draft?.value === 'string') {
@@ -482,6 +492,7 @@ Composer.propTypes = {
   }),
   notifyKeyDown: PropTypes.func,
   onMentionClose: PropTypes.func,
+  onMentionFocus: PropTypes.func,
   onMentionOpen: PropTypes.func,
   onError: PropTypes.func,
   placeholder: PropTypes.string,
@@ -495,6 +506,7 @@ Composer.defaultProps = {
   mentions: undefined,
   notifyKeyDown: undefined,
   onMentionClose: undefined,
+  onMentionFocus: undefined,
   onMentionOpen: undefined,
   onError: undefined,
   placeholder: 'Compose something awesome...',
diff --git a/src/components/MessageComposer/index.js b/src/components/MessageComposer/index.js
index 1c28c6e..c372a6b 100644
--- a/src/components/MessageComposer/index.js
+++ b/src/components/MessageComposer/index.js
@@ -20,10 +20,11 @@ const MessageComposer = ({
   notifyKeyDown,
   onMentionOpen,
   onMentionClose,
+  onMentionFocus,
   placeholder,
   onError,
   keyBindings,
-  sendButton
+  sendButton,
 }) => {
   const emitter = useRef(new TinyEmitter());
   const [active, setActive] = useState({});
@@ -54,6 +55,7 @@ const MessageComposer = ({
           notifyKeyDown={notifyKeyDown}
           onMentionOpen={onMentionOpen}
           onMentionClose={onMentionClose}
+          onMentionFocus={onMentionFocus}
           placeholder={placeholder}
           onError={onError}
           keyBindings={keyBindings}
@@ -84,6 +86,7 @@ MessageComposer.propTypes = {
   }),
   notifyKeyDown: PropTypes.func,
   onMentionClose: PropTypes.func,
+  onMentionFocus: PropTypes.func,
   onMentionOpen: PropTypes.func,
   onError: PropTypes.func,
   placeholder: PropTypes.string,
@@ -102,6 +105,7 @@ MessageComposer.defaultProps = {
   mentions: undefined,
   notifyKeyDown: null,
   onMentionClose: undefined,
+  onMentionFocus: undefined,
   onMentionOpen: undefined,
   onError: undefined,
   placeholder: '',