From 28cd2615bc5298dd28c359b4f4883ca0f29adb7b Mon Sep 17 00:00:00 2001
From: Akshun-01 <akshunkuthiala2002@gmail.com>
Date: Tue, 12 Mar 2024 03:34:42 +0530
Subject: [PATCH] scroll selected member into view in mention menu

---
 .../react/src/components/Mentions/MembersList.js  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Mentions/MembersList.js b/packages/react/src/components/Mentions/MembersList.js
index aec981603..4d8e3d84d 100644
--- a/packages/react/src/components/Mentions/MembersList.js
+++ b/packages/react/src/components/Mentions/MembersList.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
@@ -45,6 +45,8 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) {
     font-weight: 600;
   `;
 
+  const memberRef = useRef(null); 
+
   const handleMemberClick = useCallback(
     (selectedItem) => {
       onMemberClick(selectedItem);
@@ -79,9 +81,18 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) {
     };
   }, [mentionIndex, filteredMembers, handleMemberClick]);
 
+  useEffect(() => {
+    if (memberRef.current) {
+      const selectedMember = memberRef.current.children[mentionIndex];
+      if (selectedMember) {
+        selectedMember.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  }, [mentionIndex]);
+
   return (
     <Box css={listStyle}>
-      <ul style={{ listStyle: 'none' }}>
+      <ul style={{ listStyle: 'none' }} ref={memberRef}>
         {filteredMembers.map((member, index) => (
           <li
             key={member._id}