[Chat] Fix for inconsistencies in cursor position during mention editing (#3242)

Author: vhuseinova-msft

change-beta/@azure-communication-react-2bf80130-8dc8-4708-9008-ab2469cd7806.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed cursor position during mention editing",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-2bf80130-8dc8-4708-9008-ab2469cd7806.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed cursor position during mention editing",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -627,6 +627,8 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
 
   // Adjust the selection range based on a mouse / touch interaction
   const handleOnInteractionStarted = useCallback(() => {
+    // reset caret index as a new selection is started or cursor position will be changed
+    setCaretIndex(undefined);
     setInteractionStartSelection(undefined);
     setShouldHandleMoveEvent(true);
     setShouldHandleOnMouseDownDuringSelect(true);
@@ -686,6 +688,17 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
           });
         }}
         onSelect={(e) => {
+          // update selection if needed
+          if (caretIndex !== undefined) {
+            // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and
+            // onSelect still returns outdated value for cursor position
+            // e.g. when user select some text and a first name in a mention then delete or type something else
+            if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {
+              e.currentTarget.setSelectionRange(caretIndex, caretIndex);
+            }
+            setCaretIndex(undefined);
+            return;
+          }
           handleOnSelect({
             event: e,
             inputTextValue,

packages/react-components/src/components/TextFieldWithMention/mentionTagUtils.ts

@@ -455,25 +455,36 @@ export const updateHTML = (props: UpdateHTMLProps): { updatedHTML: string; updat
         break;
       } else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
         // the change started in the tag but finishes somewhere further
-        const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
         if (isMentionTag) {
-          const updateMentionTagResult = handleMentionTagUpdate({
-            htmlText,
-            oldPlainText,
-            lastProcessedHTMLIndex,
-            processedChange: '',
-            change,
-            tag,
-            closeTagIdx: closingTagInfo.closeTagIdx,
-            closeTagLength: closingTagInfo.closeTagLength,
-            plainTextEndIndex: closingTagInfo.plainTextEndIndex,
-            startIndex,
-            oldPlainTextEndIndex,
-            mentionTagLength
-          });
-          result += updateMentionTagResult.result;
-          lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
-          // no need to handle plainTextSelectionEndIndex as the change will be added later
+          if (startIndex === closingTagInfo.plainTextEndIndex) {
+            // the change should be handled out of mention tag
+            // as startIndex === closingTagInfo.plainTextEndIndex and oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex
+            result += htmlText.substring(
+              lastProcessedHTMLIndex,
+              closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength
+            );
+            // no need to handle plainTextSelectionEndIndex as the change will be added later
+            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+          } else {
+            // part of the mention tag was changed/deleted
+            const updateMentionTagResult = handleMentionTagUpdate({
+              htmlText,
+              oldPlainText,
+              lastProcessedHTMLIndex,
+              processedChange: '',
+              change,
+              tag,
+              closeTagIdx: closingTagInfo.closeTagIdx,
+              closeTagLength: closingTagInfo.closeTagLength,
+              plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+              startIndex,
+              oldPlainTextEndIndex,
+              mentionTagLength
+            });
+            result += updateMentionTagResult.result;
+            lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+            // no need to handle plainTextSelectionEndIndex as the change will be added later
+          }
         } else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
           // with subtags
           const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length);
@@ -490,6 +501,7 @@ export const updateHTML = (props: UpdateHTMLProps): { updatedHTML: string; updat
           result += stringBefore + updatedContent.updatedHTML;
         } else {
           // no subtags
+          const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
           result += htmlText.substring(
             lastProcessedHTMLIndex,
             tag.openTagIndex + tag.openTagBody.length + startChangeDiff