[Chat] Fix mention popover position incorrect when insert mention in the middle of long text (#3348)

* Fix Mention Popover's position is too low when insert mention in the middle of a very long text

* Change files

* Duplicate change files for beta release

Author: Leah-Xia-Microsoft

change-beta/@azure-communication-react-5d3c3a90-b296-4be7-b53a-e813450aed36.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix Mention Popover's position is too low when insert mention in the middle of a very long text",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-5d3c3a90-b296-4be7-b53a-e813450aed36.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix Mention Popover's position is too low when insert mention in the middle of a very long text",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/TextFieldWithMention/TextFieldWithMention.tsx

@@ -562,9 +562,8 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
         // Update the caret position, used for positioning the suggestions popover
         const textField = event.currentTarget;
         const relativePosition = Caret.getRelativePosition(textField);
-        const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);
-        if (relativePosition.top > adjustOffset) {
-          relativePosition.top -= adjustOffset;
+        if (textField.scrollHeight > textField.clientHeight) {
+          relativePosition.top -= textField.scrollTop;
         }
         setCaretPosition(relativePosition);
         if (triggerPriorIndex !== undefined) {