@azure/communication-react 1.5.1-alpha-202305160013 → 1.5.1-alpha-202305180013

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js

@@ -25,14 +25,16 @@ import { _MentionPopover } from './MentionPopover';
 /* @conditional-compile-remove(mention) */
 import { useDebouncedCallback } from 'use-debounce';
 /* @conditional-compile-remove(mention) */
-const defaultMentionTrigger = '@';
+const DEFAULT_MENTION_TRIGGER = '@';
+/* @conditional-compile-remove(mention) */
+const MSFT_MENTION_TAG = 'msft-mention';
 /**
  * @private
  */
 export const InputBoxComponent = (props) => {
-    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children, 
+    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, 
     /* @conditional-compile-remove(mention) */
-    mentionLookupOptions } = props;
+    mentionLookupOptions, children } = props;
     const inputBoxRef = useRef(null);
     /* @conditional-compile-remove(mention) */
     // Current suggestion list, provided by the callback
@@ -48,10 +50,13 @@ export const InputBoxComponent = (props) => {
     /* @conditional-compile-remove(mention) */
     const [tagsValue, setTagsValue] = useState([]);
     /* @conditional-compile-remove(mention) */
+    // Index of the previous selection start in the text field
     const [selectionStartValue, setSelectionStartValue] = useState(null);
     /* @conditional-compile-remove(mention) */
+    // Index of the previous selection end in the text field
     const [selectionEndValue, setSelectionEndValue] = useState(null);
     /* @conditional-compile-remove(mention) */
+    // Boolean value to check if onMouseDown event should be handled during select as selection range for onMouseDown event is not updated yet and the selection range for mouse click/taps will be updated in onSelect event if needed.
     const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState(true);
     /* @conditional-compile-remove(mention) */
     // Caret position in the text field
@@ -62,24 +67,38 @@ export const InputBoxComponent = (props) => {
     /* @conditional-compile-remove(mention) */
     const localeStrings = useLocale().strings;
     /* @conditional-compile-remove(mention) */
+    // Set mention suggestions
     const updateMentionSuggestions = useCallback((suggestions) => {
-        var _a;
         setMentionSuggestions(suggestions);
-        if (caretIndex !== undefined) {
-            (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionEnd(caretIndex);
-        }
-    }, [textFieldRef, caretIndex]);
+    }, [setMentionSuggestions]);
     /* @conditional-compile-remove(mention) */
     // Parse the text and get the plain text version to display in the input box
     useEffect(() => {
-        const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || defaultMentionTrigger;
-        const [tags, plainText] = textToTagParser(textValue, trigger);
-        setInputTextValue(plainText);
-        setTagsValue(tags);
+        const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || DEFAULT_MENTION_TRIGGER;
+        const parsedHTMLData = textToTagParser(textValue, trigger);
+        setInputTextValue(parsedHTMLData.plainText);
+        setTagsValue(parsedHTMLData.tags);
         updateMentionSuggestions([]);
     }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    /* @conditional-compile-remove(mention) */
+    useEffect(() => {
+        var _a;
+        // effect for caret index update
+        if (caretIndex === undefined || textFieldRef === undefined || (textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === undefined) {
+            return;
+        }
+        // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index
+        const updatedCaretIndex = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: caretIndex
+        });
+        (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(updatedCaretIndex, updatedCaretIndex);
+        setSelectionStartValue(updatedCaretIndex);
+        setSelectionEndValue(updatedCaretIndex);
+    }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);
     const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
@@ -94,7 +113,7 @@ export const InputBoxComponent = (props) => {
     const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
     /* @conditional-compile-remove(mention) */
     const onSuggestionSelected = useCallback((suggestion) => {
-        var _a, _b;
+        var _a, _b, _c;
         let selectionEnd = ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || -1;
         if (selectionEnd < 0) {
             selectionEnd = 0;
@@ -106,16 +125,30 @@ export const InputBoxComponent = (props) => {
         const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
         // update plain text with the mention html text
         const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : defaultMentionTrigger;
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
         // update html text with updated plain text
-        const [updatedHTML] = updateHTML(textValue, oldPlainText, newPlainText, tagsValue, currentTriggerStartIndex, selectionEnd, mention, triggerText);
+        const updatedContent = updateHTML({
+            htmlText: textValue,
+            oldPlainText,
+            newPlainText,
+            tags: tagsValue,
+            startIndex: currentTriggerStartIndex,
+            oldPlainTextEndIndex: selectionEnd,
+            change: mention,
+            mentionTrigger: triggerText
+        });
         const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
-        // Move the caret in the text field to the end of the mention plain text
-        setCaretIndex(selectionEnd + displayName.length);
+        const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;
+        // move the caret in the text field to the end of the mention plain text
+        setCaretIndex(newCaretIndex);
+        setSelectionEndValue(newCaretIndex);
+        setSelectionStartValue(newCaretIndex);
         setCurrentTriggerStartIndex(-1);
         updateMentionSuggestions([]);
+        // set focus back to text field
+        (_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         setActiveSuggestionIndex(undefined);
-        onChange && onChange(undefined, updatedHTML);
+        onChange && onChange(undefined, updatedContent.updatedHTML);
     }, [
         textFieldRef,
         inputTextValue,
@@ -130,6 +163,15 @@ export const InputBoxComponent = (props) => {
         localeStrings
     ]);
     const onTextFieldKeyDown = useCallback((ev) => {
+        /* @conditional-compile-remove(mention) */
+        // caretIndex should be set to undefined when the user is typing
+        setCaretIndex(undefined);
+        // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.
+        // it shouldn't be updated in onMouseUp
+        // as onMouseUp can be triggered before or after onSelect event
+        // because its order depends on mouse events not selection.
+        /* @conditional-compile-remove(mention) */
+        setShouldHandleOnMouseDownDuringSelect(false);
         // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
         if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {
             return;
@@ -201,24 +243,149 @@ export const InputBoxComponent = (props) => {
         };
     }, [debouncedQueryUpdate]);
     /* @conditional-compile-remove(mention) */
-    const handleOnChange = useCallback((event, updatedValue) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+    // Update selections index in mention to navigate by words
+    const updateSelectionIndexesWithMentionIfNeeded = useCallback((event, inputTextValue, selectionStartValue, selectionEndValue, tagsValue) => {
+        var _a, _b, _c;
+        let updatedStartIndex = event.currentTarget.selectionStart;
+        let updatedEndIndex = event.currentTarget.selectionEnd;
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
+            event.currentTarget.selectionStart !== null &&
+            event.currentTarget.selectionStart !== -1) {
+            // just a caret movement/usual typing or deleting
+            const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+            // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+            if (mentionTag !== undefined &&
+                mentionTag.plainTextBeginIndex !== undefined &&
+                event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
+                // get updated selection index
+                const newSelectionIndex = findNewSelectionIndexForMention({
+                    tag: mentionTag,
+                    textValue: inputTextValue,
+                    currentSelectionIndex: event.currentTarget.selectionStart,
+                    previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                });
+                updatedStartIndex = newSelectionIndex;
+                updatedEndIndex = newSelectionIndex;
+            }
+        }
+        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
+            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
+            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
+                // the selection start is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
+                    updatedStartIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionStart,
+                        previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                    });
+                }
+            }
+            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
+                // the selection end is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
+                // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
+                    updatedEndIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionEnd,
+                        previousSelectionIndex: selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : inputTextValue.length
+                    });
+                }
+            }
+        }
+        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
+        if (event.currentTarget.selectionDirection === null) {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
+        }
+        else {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
+        }
+        setSelectionStartValue(updatedStartIndex);
+        setSelectionEndValue(updatedEndIndex);
+    }, [setSelectionStartValue, setSelectionEndValue]);
+    /* @conditional-compile-remove(mention) */
+    const handleOnSelect = useCallback((event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue) => {
+        var _a, _b, _c;
+        /* @conditional-compile-remove(mention) */
+        if (shouldHandleOnMouseDownDuringSelect && event.currentTarget.selectionStart !== null) {
+            // on select was triggered by mouse down
+            const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                // handle mention click
+                if (event.currentTarget.selectionDirection === null) {
+                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
+                }
+                else {
+                    event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, event.currentTarget.selectionDirection);
+                }
+                setSelectionStartValue(mentionTag.plainTextBeginIndex);
+                setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
+            }
+            else {
+                setSelectionStartValue(event.currentTarget.selectionStart);
+                setSelectionEndValue(event.currentTarget.selectionEnd);
+            }
+        }
+        else {
+            // selection was changed by keyboard
+            updateSelectionIndexesWithMentionIfNeeded(event, inputTextValue, selectionStartValue, selectionEndValue, tags);
+        }
+        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange could trigger additional calls of onSelect event and they may not be handled correctly (because of setSelectionRange calls or rerender)
+    }, [updateSelectionIndexesWithMentionIfNeeded]);
+    /* @conditional-compile-remove(mention) */
+    const handleOnChange = useCallback((event, tagsValue, htmlTextValue, inputTextValue, currentTriggerStartIndex, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd, updatedValue) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        if (event.currentTarget === null) {
+            return;
+        }
+        // handle backspace change
+        // onSelect is not called for backspace as selection is not changed and local caret index is outdated
+        setCaretIndex(undefined);
         const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : defaultMentionTrigger;
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
         const newTextLength = newValue.length;
-        let selectionEnd = ((_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.selectionEnd) || -1;
-        selectionEnd = Math.max(0, selectionEnd);
-        selectionEnd = Math.min(selectionEnd, newTextLength - 1);
+        // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
+        const currentSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionEnd
+        });
+        const currentSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionStart
+        });
+        const previousSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionStart
+        });
+        const previousSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionEnd
+        });
         // If we are enabled for lookups,
         if (mentionLookupOptions !== undefined) {
             // Look at the range of the change for a trigger character
-            const triggerPriorIndex = newValue.lastIndexOf(triggerText, selectionEnd - 1);
+            const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);
             // Update the caret position, if not doing a lookup
             setCaretPosition(Caret.getRelativePosition(event.currentTarget));
             if (triggerPriorIndex !== undefined) {
                 // trigger is found
                 const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
-                const wordAtSelection = newValue.substring(triggerPriorIndex, selectionEnd);
+                const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);
                 let tagIndex = currentTriggerStartIndex;
                 if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
                     //no space before the trigger <- continuation of the previous word
@@ -227,7 +394,7 @@ export const InputBoxComponent = (props) => {
                 }
                 else if (wordAtSelection === triggerText) {
                     // start of the mention
-                    tagIndex = selectionEnd - triggerText.length;
+                    tagIndex = currentSelectionEndValue - triggerText.length;
                     if (tagIndex < 0) {
                         tagIndex = 0;
                     }
@@ -249,88 +416,42 @@ export const InputBoxComponent = (props) => {
         }
         let result = '';
         if (tagsValue.length === 0) {
-            // no tags in the string, textValue is a sting
+            // no tags in the string and newValue should be used as a result string
             result = newValue;
         }
         else {
-            // there are tags in the text value, textValue is html string
-            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes(inputTextValue, newValue, selectionEnd);
-            // get updated html string
+            // there are tags in the text value and htmlTextValue is html string
+            // find diff between old and new text
+            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+                oldText: inputTextValue,
+                newText: newValue,
+                previousSelectionStart: previousSelectionStartValue,
+                previousSelectionEnd: previousSelectionEndValue,
+                currentSelectionStart: currentSelectionStartValue,
+                currentSelectionEnd: currentSelectionEndValue
+            });
             const change = newValue.substring(changeStart, newChangeEnd);
-            const [updatedHTML, updatedChangeNewEndIndex] = updateHTML(textValue, inputTextValue, newValue, tagsValue, changeStart, oldChangeEnd, change, triggerText);
-            result = updatedHTML;
-            if (updatedChangeNewEndIndex !== null) {
-                if ((change.length === 1 && event.currentTarget.selectionStart === event.currentTarget.selectionEnd) || // simple input
-                    (change.length === 0 && newChangeEnd === changeStart) //delete
-                ) {
-                    setCaretIndex(updatedChangeNewEndIndex);
-                }
+            // get updated html string
+            const updatedContent = updateHTML({
+                htmlText: htmlTextValue,
+                oldPlainText: inputTextValue,
+                newPlainText: newValue,
+                tags: tagsValue,
+                startIndex: changeStart,
+                oldPlainTextEndIndex: oldChangeEnd,
+                change,
+                mentionTrigger: triggerText
+            });
+            result = updatedContent.updatedHTML;
+            // update caret index if needed
+            if (updatedContent.updatedSelectionIndex !== null) {
+                setCaretIndex(updatedContent.updatedSelectionIndex);
+                setSelectionEndValue(updatedContent.updatedSelectionIndex);
+                setSelectionStartValue(updatedContent.updatedSelectionIndex);
             }
         }
         onChange && onChange(event, result);
-    }), [
-        onChange,
-        mentionLookupOptions,
-        tagsValue,
-        textValue,
-        inputTextValue,
-        currentTriggerStartIndex,
-        setCaretIndex,
-        setCaretPosition,
-        updateMentionSuggestions,
-        debouncedQueryUpdate,
-        textFieldRef
-    ]);
-    /* @conditional-compile-remove(mention) */
-    const updateSelectionIndexesWithMentionIfNeeded = (event) => {
-        var _a;
-        let updatedStartIndex = event.currentTarget.selectionStart;
-        let updatedEndIndex = event.currentTarget.selectionEnd;
-        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
-            event.currentTarget.selectionStart !== null &&
-            event.currentTarget.selectionStart !== -1) {
-            const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                if (selectionStartValue === null) {
-                    updatedStartIndex = mentionTag.plainTextBeginIndex;
-                    updatedEndIndex = (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex;
-                }
-                else {
-                    const newSelectionIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionStart, selectionStartValue);
-                    updatedStartIndex = newSelectionIndex;
-                    updatedEndIndex = newSelectionIndex;
-                }
-            }
-        }
-        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
-            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
-            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
-                // the selection start is changed
-                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                    //TODO: here it takes -1 when it shouldn't, update selectionstart and end with mouse move and or touch move
-                    updatedStartIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionStart, selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : -1);
-                }
-            }
-            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
-                // the selection end is changed
-                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                    //TODO: here it takes -1 when it shouldn't, update selectionstart and end with mouse move and or touch move
-                    updatedEndIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionEnd, selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : -1);
-                }
-            }
-        }
-        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
-        if (event.currentTarget.selectionDirection === null) {
-            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
-        }
-        else {
-            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
-        }
-        setSelectionStartValue(updatedStartIndex);
-        setSelectionEndValue(updatedEndIndex);
-    };
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
     const getInputFieldTextValue = () => {
         /* @conditional-compile-remove(mention) */
         return inputTextValue;
@@ -342,61 +463,52 @@ export const InputBoxComponent = (props) => {
                     updateMentionSuggestions([]);
                 } })),
             React.createElement(TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
+                    // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
+                    /* @conditional-compile-remove(mention) */
+                    // Prevents React from resetting event's properties
+                    e.persist();
                     /* @conditional-compile-remove(mention) */
                     setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
                     /* @conditional-compile-remove(mention) */
-                    handleOnChange(e, newValue);
+                    handleOnChange(e, tagsValue, textValue, inputTextValue, currentTriggerStartIndex, selectionStartValue === null ? undefined : selectionStartValue, selectionEndValue === null ? undefined : selectionEndValue, e.currentTarget.selectionStart === null ? undefined : e.currentTarget.selectionStart, e.currentTarget.selectionEnd === null ? undefined : e.currentTarget.selectionEnd, newValue);
                     /* @conditional-compile-remove(mention) */
                     return;
                     onChange(e, newValue);
                 }, 
                 /* @conditional-compile-remove(mention) */
                 onSelect: (e) => {
-                    var _a, _b, _c;
+                    // update selection if needed
                     if (caretIndex !== undefined) {
-                        e.currentTarget.setSelectionRange(caretIndex, caretIndex);
                         setCaretIndex(undefined);
-                        return;
-                    }
-                    //TODO: need to check to navigate before/after space correctly in tag + when selecting by mouse
-                    /* @conditional-compile-remove(mention) */
-                    if (shouldHandleOnMouseDownDuringSelect &&
-                        e.currentTarget.selectionStart !== null &&
-                        e.currentTarget.selectionStart === e.currentTarget.selectionEnd) {
-                        // handle mention click
-                        const mentionTag = findMentionTagForSelection(tagsValue, e.currentTarget.selectionStart);
-                        if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
-                            if (e.currentTarget.selectionDirection === null) {
-                                e.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
-                            }
-                            else {
-                                e.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, e.currentTarget.selectionDirection);
-                            }
-                            setSelectionStartValue(mentionTag.plainTextBeginIndex);
-                            setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
-                        }
-                        else {
-                            setSelectionStartValue(e.currentTarget.selectionStart);
-                            setSelectionEndValue(e.currentTarget.selectionEnd);
+                        // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and onSelect should handle this case
+                        if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {
+                            e.currentTarget.setSelectionRange(caretIndex, caretIndex);
                         }
+                        return;
                     }
-                    else {
-                        updateSelectionIndexesWithMentionIfNeeded(e);
-                    }
-                    /* @conditional-compile-remove(mention) */
-                    setShouldHandleOnMouseDownDuringSelect(false);
-                }, onMouseDown: () => {
+                    handleOnSelect(e, inputTextValue, tagsValue, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue);
+                }, 
+                /* @conditional-compile-remove(mention) */
+                onMouseDown: () => {
                     // as events order is onMouseDown -> onSelect -> onClick
                     // onClick and onMouseDown can't handle clicking on mention event because
-                    // onClick has wrong range as it's called after onSelect
-                    // onMouseDown doesn't have correct selectionRange yet
+                    // onMouseDown doesn't have correct selectionRange yet and
+                    // onClick already has wrong range as it's called after onSelect that updates the selection range
                     // so we need to handle onMouseDown to prevent onSelect default behavior
-                    /* @conditional-compile-remove(mention) */
                     setShouldHandleOnMouseDownDuringSelect(true);
-                }, onTouchStart: () => {
+                }, 
+                /* @conditional-compile-remove(mention) */
+                onTouchStart: () => {
                     // see onMouseDown for more details
-                    /* @conditional-compile-remove(mention) */
                     setShouldHandleOnMouseDownDuringSelect(true);
+                }, 
+                /* @conditional-compile-remove(mention) */
+                onBlur: () => {
+                    // setup all flags to default values when text field loses focus
+                    setShouldHandleOnMouseDownDuringSelect(false);
+                    setCaretIndex(undefined);
+                    setSelectionStartValue(null);
+                    setSelectionEndValue(null);
                 }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, onRenderSuffix: onRenderChildren, elementRef: inputBoxRef }))));
 };
 /**
@@ -425,77 +537,93 @@ export const InputBoxButton = (props) => {
 };
 /* @conditional-compile-remove(mention) */
 /**
- * Find mention tag if selection is inside of it
+ * Get validated value for index between min and max values. If currentValue is not defined, -1 will be used instead.
  *
  * @private
+ * @param props - Props for finding a valid index in range.
+ * @returns Valid index in the range.
+ */
+const getValidatedIndexInRange = (props) => {
+    const { min, max, currentValue } = props;
+    let updatedValue = currentValue !== null && currentValue !== void 0 ? currentValue : -1;
+    updatedValue = Math.max(min, updatedValue);
+    updatedValue = Math.min(updatedValue, max);
+    return updatedValue;
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Find mention tag for selection if exists.
+ *
+ * @private
+ * @param tags - Existing list of tags.
+ * @param selection - Selection index.
+ * @returns Mention tag if exists, otherwise undefined.
  */
 const findMentionTagForSelection = (tags, selection) => {
     let mentionTag = undefined;
     for (let i = 0; i < tags.length; i++) {
         const tag = tags[i];
-        let plainTextEndIndex = 0;
-        if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
-            // close tag exists
-            plainTextEndIndex = tag.plainTextEndIndex;
-        }
-        else if (tag.plainTextBeginIndex !== undefined) {
-            //no close tag
-            plainTextEndIndex = tag.plainTextBeginIndex;
+        const closingTagInfo = getTagClosingTagInfo(tag);
+        if (tag.plainTextBeginIndex !== undefined && tag.plainTextBeginIndex > selection) {
+            // no need to check further as the selection is before the tag
+            break;
         }
-        if (tag.subTags !== undefined && tag.subTags.length !== 0) {
-            const selectedTag = findMentionTagForSelection(tag.subTags, selection);
-            if (selectedTag !== undefined) {
-                mentionTag = selectedTag;
+        else if (tag.plainTextBeginIndex !== undefined &&
+            tag.plainTextBeginIndex <= selection &&
+            selection <= closingTagInfo.plainTextEndIndex) {
+            // no need to check if tag doesn't contain selection
+            if (tag.subTags !== undefined && tag.subTags.length !== 0) {
+                const selectedTag = findMentionTagForSelection(tag.subTags, selection);
+                if (selectedTag !== undefined) {
+                    mentionTag = selectedTag;
+                    break;
+                }
+            }
+            else if (tag.tagType === MSFT_MENTION_TAG) {
+                mentionTag = tag;
                 break;
             }
         }
-        else if (tag.tagType === 'msft-mention' &&
-            tag.plainTextBeginIndex !== undefined &&
-            tag.plainTextBeginIndex < selection &&
-            selection < plainTextEndIndex) {
-            mentionTag = tag;
-            break;
-        }
     }
     return mentionTag;
 };
 /* @conditional-compile-remove(mention) */
 /**
- * Go through tags and find a new the selection index if it is inside of a mention tag
+ * Find a new the selection index.
  *
  * @private
+ * @param props - Props for finding new selection index for mention.
+ * @returns New selection index if it is inside of a mention tag, otherwise the current selection.
  */
-const findNewSelectionIndexForMention = (tag, textValue, selection, previousSelection) => {
+const findNewSelectionIndexForMention = (props) => {
     var _a;
-    if (tag.plainTextBeginIndex === undefined ||
-        tag.tagType !== 'msft-mention' ||
-        selection === previousSelection ||
+    const { tag, textValue, currentSelectionIndex, previousSelectionIndex } = props;
+    // check if this is a mention tag and selection should be updated
+    if (tag.tagType !== MSFT_MENTION_TAG ||
+        tag.plainTextBeginIndex === undefined ||
+        currentSelectionIndex === previousSelectionIndex ||
         tag.plainTextEndIndex === undefined) {
-        return selection;
+        return currentSelectionIndex;
     }
     let spaceIndex = 0;
-    if (selection <= previousSelection) {
-        // the cursor is moved to the left
-        spaceIndex = textValue.lastIndexOf(' ', selection !== null && selection !== void 0 ? selection : 0);
+    if (currentSelectionIndex <= previousSelectionIndex) {
+        // the cursor is moved to the left, find the last index before the cursor
+        spaceIndex = textValue.lastIndexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
         if (spaceIndex === -1) {
-            // no space before the selection
+            // no space before the selection, use the beginning of the tag
             spaceIndex = tag.plainTextBeginIndex;
         }
     }
     else {
-        // the cursor is moved to the right
-        spaceIndex = textValue.indexOf(' ', selection !== null && selection !== void 0 ? selection : 0);
+        // the cursor is moved to the right, find the fist index after the cursor
+        spaceIndex = textValue.indexOf(' ', currentSelectionIndex !== null && currentSelectionIndex !== void 0 ? currentSelectionIndex : 0);
         if (spaceIndex === -1) {
-            // no space after the selection
+            // no space after the selection, use the end of the tag
             spaceIndex = (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : tag.plainTextBeginIndex;
         }
     }
-    if (spaceIndex < tag.plainTextBeginIndex) {
-        spaceIndex = tag.plainTextBeginIndex;
-    }
-    else if (spaceIndex > tag.plainTextEndIndex) {
-        spaceIndex = tag.plainTextEndIndex;
-    }
+    spaceIndex = Math.max(tag.plainTextBeginIndex, spaceIndex);
+    spaceIndex = Math.min(tag.plainTextEndIndex, spaceIndex);
     return spaceIndex;
 };
 /* @conditional-compile-remove(mention) */
@@ -503,10 +631,21 @@ const findNewSelectionIndexForMention = (tag, textValue, selection, previousSele
  * Handle mention tag edit and by word deleting
  *
  * @private
+ * @param props - Props for mention update HTML function.
+ * @returns Updated texts and indexes.
  */
-const handleMentionTagUpdate = (htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength) => {
-    if (tag.tagType !== 'msft-mention' || tag.plainTextBeginIndex === undefined) {
-        return ['', processedChange, lastProcessedHTMLIndex, null];
+const handleMentionTagUpdate = (props) => {
+    const { htmlText, oldPlainText, change, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength } = props;
+    let processedChange = props.processedChange;
+    let lastProcessedHTMLIndex = props.lastProcessedHTMLIndex;
+    if (tag.tagType !== MSFT_MENTION_TAG || tag.plainTextBeginIndex === undefined) {
+        // not a mention tag
+        return {
+            result: '',
+            updatedChange: processedChange,
+            htmlIndex: lastProcessedHTMLIndex,
+            plainTextSelectionEndIndex: null
+        };
     }
     let result = '';
     let plainTextSelectionEndIndex = null;
@@ -529,9 +668,11 @@ const handleMentionTagUpdate = (htmlText, oldPlainText, lastProcessedHTMLIndex,
     }
     isSpaceLengthHandled = true;
     if (rangeStart === -1 || rangeStart === undefined || rangeStart < tag.plainTextBeginIndex) {
+        // rangeStart should be at least equal to tag.plainTextBeginIndex
         rangeStart = tag.plainTextBeginIndex;
     }
     if (rangeEnd > plainTextEndIndex) {
+        // rangeEnd should be at most equal to plainTextEndIndex
         rangeEnd = plainTextEndIndex;
     }
     if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
@@ -551,28 +692,61 @@ const handleMentionTagUpdate = (htmlText, oldPlainText, lastProcessedHTMLIndex,
         }
         endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;
         result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
-        // plainTextSelectionEndIndex = rangeStart + processedChange.length;
+        if (startIndex < tag.plainTextBeginIndex) {
+            // if the change is before the tag, the selection should start from startIndex (rangeStart will be equal to tag.plainTextBeginIndex)
+            plainTextSelectionEndIndex = startIndex + change.length;
+        }
+        else {
+            // if the change is inside the tag, the selection should start with rangeStart
+            plainTextSelectionEndIndex = rangeStart + processedChange.length;
+        }
         lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
         // processed change should not be changed as it should be added after the tag
     }
-    return [result, processedChange, lastProcessedHTMLIndex, plainTextSelectionEndIndex];
+    return { result, updatedChange: processedChange, htmlIndex: lastProcessedHTMLIndex, plainTextSelectionEndIndex };
 };
 /* @conditional-compile-remove(mention) */
 /**
- * Go through the text and update it with the changed text
+ * Get closing tag information if exists otherwise return information as for self closing tag
  *
  * @private
+ * @param tag - Tag data.
+ * @returns Closing tag information for the provided tag.
  */
-const updateHTML = (htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger) => {
-    let result = '';
-    if (tags.length === 0) {
-        // no tags added yet
-        return [newPlainText, null];
+const getTagClosingTagInfo = (tag) => {
+    let plainTextEndIndex = 0;
+    let closeTagIdx = 0;
+    let closeTagLength = 0;
+    if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
+        // close tag exists
+        plainTextEndIndex = tag.plainTextEndIndex;
+        closeTagIdx = tag.closeTagIdx;
+        // tag.tagType.length + </>
+        closeTagLength = tag.tagType.length + 3;
+    }
+    else if (tag.plainTextBeginIndex !== undefined) {
+        // no close tag
+        plainTextEndIndex = tag.plainTextBeginIndex;
+        closeTagIdx = tag.openTagIdx + tag.openTagBody.length;
+        closeTagLength = 0;
     }
-    if (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length) {
-        // the whole text is changed
-        return [newPlainText, null];
+    return { plainTextEndIndex, closeTagIdx, closeTagLength };
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Go through the text and update it with the changed text
+ *
+ * @private
+ * @param props - Props for update HTML function.
+ * @returns Updated HTML and selection index if the selection index should be set.
+ */
+const updateHTML = (props) => {
+    const { htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
+    if (tags.length === 0 || (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1)) {
+        // no tags added yet or the whole text is changed
+        return { updatedHTML: newPlainText, updatedSelectionIndex: null };
     }
+    let result = '';
     let lastProcessedHTMLIndex = 0;
     // the value can be updated with empty string when the change covers more than 1 place (tag + before or after the tag)
     // in this case change won't be added as part of the tag
@@ -583,7 +757,7 @@ const updateHTML = (htmlText, oldPlainText, newPlainText, tags, startIndex, oldP
     let processedChange = change;
     // end tag plain text index of the last processed tag
     let lastProcessedPlainTextTagEndIndex = 0;
-    // as some tags/text can be removed fully, selectionEnd should be updated correctly
+    // as some tags/text can be removed fully, selection should be updated correctly
     let changeNewEndIndex = null;
     for (let i = 0; i < tags.length; i++) {
         const tag = tags[i];
@@ -592,165 +766,225 @@ const updateHTML = (htmlText, oldPlainText, newPlainText, tags, startIndex, oldP
         }
         // all plain text indexes includes trigger length for the mention that shouldn't be included in
         // htmlText.substring because html strings don't include the trigger
-        // mentionTagLength will be set only for 'msft-mention', otherwise should be 0
+        // mentionTagLength will be set only for mention tag, otherwise should be 0
         let mentionTagLength = 0;
         let isMentionTag = false;
-        if (tag.tagType === 'msft-mention') {
+        if (tag.tagType === MSFT_MENTION_TAG) {
             mentionTagLength = mentionTrigger.length;
             isMentionTag = true;
         }
-        //change start is before the open tag
         if (startIndex <= tag.plainTextBeginIndex) {
+            // change start is before the open tag
             // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
             const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx - startChangeDiff) + processedChange;
+            processedChange = '';
             if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
                 // the whole change is before tag start
-                // oldPlainTextEndIndex already includes mentionTag length
+                // mentionTag length can be ignored here as the change is before the tag
                 const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
                 lastProcessedHTMLIndex = tag.openTagIdx - endChangeDiff;
-                processedChange = '';
                 // the change is handled; exit
                 break;
             }
             else {
                 // change continues in the tag
                 lastProcessedHTMLIndex = tag.openTagIdx;
-                processedChange = '';
                 // proceed to the next check
             }
         }
-        let plainTextEndIndex = 0;
-        let closeTagIdx = 0;
-        let closeTagLength = 0;
-        if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
-            // close tag exists
-            plainTextEndIndex = tag.plainTextEndIndex;
-            closeTagIdx = tag.closeTagIdx;
-            // tag.tagType.length + </>
-            closeTagLength = tag.tagType.length + 3;
-        }
-        else {
-            // no close tag
-            plainTextEndIndex = tag.plainTextBeginIndex;
-            closeTagIdx = tag.openTagIdx + tag.openTagBody.length;
-            closeTagLength = 0;
-        }
-        if (startIndex < plainTextEndIndex) {
+        const closingTagInfo = getTagClosingTagInfo(tag);
+        if (startIndex <= closingTagInfo.plainTextEndIndex) {
             // change started before the end tag
-            if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === plainTextEndIndex) {
+            if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
                 // the change is a tag or starts before the tag
                 // tag should be removed, no matter if there are subtags
                 result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
                 processedChange = '';
-                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                 // the change is handled; exit
                 break;
             }
-            else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex < plainTextEndIndex) {
-                // edge case: the change is between tag
+            else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex <= closingTagInfo.plainTextEndIndex) {
+                // the change is between the tag
                 if (isMentionTag) {
                     if (change !== '') {
-                        // mention tag should be deleted when user tries to edit it
-                        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
-                        changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                        if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
+                            // mention tag should be deleted when user tries to edit it in the middle
+                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                        }
+                        else if (startIndex === tag.plainTextBeginIndex) {
+                            // non empty change at the beginning of the mention tag to be added before the mention tag
+                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            lastProcessedHTMLIndex = tag.openTagIdx;
+                        }
+                        else if (startIndex === closingTagInfo.plainTextEndIndex) {
+                            // non empty change at the end of the mention tag to be added after the mention tag
+                            result +=
+                                htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
+                                    processedChange;
+                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
+                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                        }
                         processedChange = '';
-                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
                     }
                     else {
-                        const [resultValue, updatedChange, htmlIndex, plainTextSelectionEndIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
-                        result += resultValue;
-                        changeNewEndIndex = plainTextSelectionEndIndex;
-                        processedChange = updatedChange;
-                        lastProcessedHTMLIndex = htmlIndex;
+                        const updateMentionTagResult = handleMentionTagUpdate({
+                            htmlText,
+                            oldPlainText,
+                            lastProcessedHTMLIndex,
+                            processedChange,
+                            change,
+                            tag,
+                            closeTagIdx: closingTagInfo.closeTagIdx,
+                            closeTagLength: closingTagInfo.closeTagLength,
+                            plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                            startIndex,
+                            oldPlainTextEndIndex,
+                            mentionTagLength
+                        });
+                        result += updateMentionTagResult.result;
+                        changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
+                        processedChange = updateMentionTagResult.updatedChange;
+                        lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
                     }
-                    // the change is handled; exit
-                    break;
                 }
-                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content) {
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    // before the tag content
                     const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    const [content, updatedChangeNewEndIndex] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, mentionTrigger);
-                    result += stringBefore + content;
-                    changeNewEndIndex = updatedChangeNewEndIndex;
-                    break;
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: processedChange,
+                        mentionTrigger
+                    });
+                    result += stringBefore + updatedContent.updatedHTML;
+                    changeNewEndIndex = updatedContent.updatedSelectionIndex;
                 }
                 else {
                     // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
-                    const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex - mentionTagLength;
+                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
                     result +=
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff) +
                             processedChange;
                     processedChange = '';
-                    lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
-                    // the change is handled; exit
-                    break;
+                    if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
+                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
+                        lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
+                    }
+                    else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
+                        lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    }
                 }
+                // the change is handled; exit
+                break;
             }
-            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
-                //the change started in the tag but finishes somewhere further
+            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 [resultValue, updatedChange, htmlIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, oldPlainText.substring(startIndex, startIndex + 1) !== ' ' && change === '' ? ' ' : '', // if substring !== ' ' && change is empty -> the change should be " " and not empty string but " " wasn't included in change; otherwise the part of mention should be just deleted without processedChange update
-                    tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
-                    result += resultValue;
-                    lastProcessedHTMLIndex = htmlIndex;
-                    processedChange = updatedChange;
+                    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
-                    // proceed with the next calculations
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    // before the tag content
                     const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    const [content] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, '', // the part of the tag should be just deleted without processedChange update and change will be added after this tag
-                    mentionTrigger);
-                    result += stringBefore + content;
-                    // proceed with the next calculations
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: '',
+                        mentionTrigger
+                    });
+                    result += stringBefore + updatedContent.updatedHTML;
                 }
                 else {
                     // no subtags
                     result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    // proceed with the next calculations
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                 }
+                // proceed with the next calculations
             }
-            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
                 // the change starts before  the tag and finishes after it
                 // tag should be removed, no matter if there are subtags
                 // no need to save anything between lastProcessedHTMLIndex and closeTagIdx + closeTagLength
-                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                 // proceed with the next calculations
             }
-            else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
+            else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
                 // the change starts in the tag and finishes after it
                 // tag should be removed, no matter if there are subtags
                 result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx);
                 // processedChange shouldn't be updated as it will be added after the tag
-                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                 // proceed with the next calculations
             }
-            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < plainTextEndIndex) {
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
                 // the change  starts before the tag and ends in a tag
                 if (isMentionTag) {
-                    const [resultValue, , htmlIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, '', // the part of mention should be just deleted without processedChange update
-                    tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
-                    changeNewEndIndex = tag.plainTextBeginIndex;
-                    result += resultValue;
-                    lastProcessedHTMLIndex = htmlIndex;
+                    // mention tag
+                    const updateMentionTagResult = handleMentionTagUpdate({
+                        htmlText,
+                        oldPlainText,
+                        lastProcessedHTMLIndex,
+                        processedChange: '',
+                        change,
+                        tag,
+                        closeTagIdx: closingTagInfo.closeTagIdx,
+                        closeTagLength: closingTagInfo.closeTagLength,
+                        plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        mentionTagLength
+                    });
+                    changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
+                    result += updateMentionTagResult.result;
+                    lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
                     // with subtags
-                    // before the tag content
                     const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    const [content] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, // processedChange should equal '' and the part of the tag should be deleted as the change was handled before this tag
-                    mentionTrigger);
-                    result += stringBefore + content;
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
+                    const updatedContent = updateHTML({
+                        htmlText: tag.content,
+                        oldPlainText,
+                        newPlainText,
+                        tags: tag.subTags,
+                        startIndex,
+                        oldPlainTextEndIndex,
+                        change: processedChange,
+                        mentionTrigger
+                    });
+                    processedChange = '';
+                    result += stringBefore + updatedContent.updatedHTML;
                 }
                 else {
                     // no subtags
@@ -758,123 +992,67 @@ const updateHTML = (htmlText, oldPlainText, newPlainText, tags, startIndex, oldP
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length) + processedChange;
                     processedChange = '';
                     // oldPlainTextEndIndex already includes mentionTag length
-                    const endChangeDiff = plainTextEndIndex - oldPlainTextEndIndex;
+                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
                     // as change may be before the end of the tag, we need to add the rest of the tag
-                    lastProcessedHTMLIndex = closeTagIdx - endChangeDiff;
+                    lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
                 }
                 // the change is handled; exit
                 break;
             }
-            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex === plainTextEndIndex) {
-                // the change  starts in the tag and ends at the end of a tag
-                if (isMentionTag) {
-                    if (change !== '' && startIndex === plainTextEndIndex) {
-                        // non empty change at the end of the mention tag to be added after the mention tag
-                        result += htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength) + processedChange;
-                        changeNewEndIndex = plainTextEndIndex + processedChange.length;
-                        processedChange = '';
-                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
-                    }
-                    else if (change !== '') {
-                        // mention tag should be deleted when user tries to edit it
-                        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
-                        changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
-                        processedChange = '';
-                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
-                    }
-                    else {
-                        const [resultValue, updatedChange, htmlIndex, plainTextSelectionEndIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
-                        result += resultValue;
-                        processedChange = updatedChange;
-                        lastProcessedHTMLIndex = htmlIndex;
-                        changeNewEndIndex = plainTextSelectionEndIndex;
-                    }
-                    // the change is handled; exit
-                    break;
-                }
-                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
-                    // with subtags
-                    // before the tag content
-                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    const [content, updatedChangeNewEndIndex] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, mentionTrigger);
-                    result += stringBefore + content;
-                    changeNewEndIndex = updatedChangeNewEndIndex;
-                    break;
-                }
-                else {
-                    // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
-                    result +=
-                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff) +
-                            processedChange;
-                    processedChange = '';
-                    lastProcessedHTMLIndex = closeTagIdx;
-                    // the change is handled; exit
-                    break;
-                }
-            }
-            lastProcessedPlainTextTagEndIndex = plainTextEndIndex;
+            lastProcessedPlainTextTagEndIndex = closingTagInfo.plainTextEndIndex;
         }
-        if (i === tags.length - 1 && oldPlainTextEndIndex >= plainTextEndIndex) {
+        if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {
             // the last tag should handle the end of the change if needed
             // oldPlainTextEndIndex already includes mentionTag length
-            const endChangeDiff = oldPlainTextEndIndex - plainTextEndIndex;
-            if (startIndex >= plainTextEndIndex) {
-                const startChangeDiff = startIndex - plainTextEndIndex;
+            const endChangeDiff = oldPlainTextEndIndex - closingTagInfo.plainTextEndIndex;
+            if (startIndex >= closingTagInfo.plainTextEndIndex) {
+                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
                 result +=
-                    htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength + startChangeDiff) + processedChange;
+                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
             }
             else {
-                result += htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength) + processedChange;
+                result +=
+                    htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
+                        processedChange;
             }
             processedChange = '';
-            lastProcessedHTMLIndex = closeTagIdx + closeTagLength + endChangeDiff;
+            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + endChangeDiff;
             // the change is handled; exit
             // break is not required here as this is the last element but added for consistency
             break;
         }
     }
     if (lastProcessedHTMLIndex < htmlText.length) {
+        // add the rest of the html string
         result += htmlText.substring(lastProcessedHTMLIndex);
     }
-    return [result, changeNewEndIndex];
+    return { updatedHTML: result, updatedSelectionIndex: changeNewEndIndex };
 };
 /* @conditional-compile-remove(mention) */
 /**
  * Given the oldText and newText, find the start index, old end index and new end index for the changes
  *
- * @param oldText - the old text
- * @param newText - the new text
- * @param selectionEnd - the end of the selection
- * @returns change start index, old end index and new end index. The old and new end indexes are exclusive.
  * @private
+ * @param props - Props for finding stings diff indexes function.
+ * @returns Indexes for change start and ends in new and old texts. The old and new end indexes are exclusive.
  */
-const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a valid position in the input field
-) => {
+const findStringsDiffIndexes = (props) => {
+    const { oldText, newText, previousSelectionStart, previousSelectionEnd, currentSelectionStart, currentSelectionEnd } = props;
     const newTextLength = newText.length;
     const oldTextLength = oldText.length;
-    let changeStart = 0;
+    // let changeStart = 0;
     let newChangeEnd = newTextLength;
     let oldChangeEnd = oldTextLength;
-    const length = Math.min(newTextLength, oldTextLength, selectionEnd);
-    for (let i = 0; i < length; i++) {
-        if (newText[i] !== oldText[i]) {
-            // the symbol with changeStart index is updated
-            changeStart = i;
-            break;
-        }
-        else if (i === length - 1 && newText[i] === oldText[i]) {
-            // the symbol is added at the end of inputTextValue
-            changeStart = length;
-            break;
-        }
-    }
+    const previousSelectionStartValue = previousSelectionStart > -1 ? previousSelectionStart : oldTextLength;
+    const previousSelectionEndValue = previousSelectionEnd > -1 ? previousSelectionEnd : oldTextLength;
+    const currentSelectionStartValue = currentSelectionStart > -1 ? currentSelectionStart : newTextLength;
+    const currentSelectionEndValue = currentSelectionEnd > -1 ? currentSelectionEnd : newTextLength;
+    const changeStart = Math.min(previousSelectionStartValue, previousSelectionEndValue, currentSelectionStartValue, currentSelectionEndValue, newTextLength, oldTextLength);
     if (oldTextLength < newTextLength) {
         //insert or replacement
         if (oldTextLength === changeStart) {
             // when change was at the end of string
-            // Change is found
+            // change is found
             newChangeEnd = newTextLength;
             oldChangeEnd = oldTextLength;
         }
@@ -883,7 +1061,7 @@ const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a va
                 newChangeEnd = newTextLength - i - 1;
                 oldChangeEnd = oldTextLength - i - 1;
                 if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                    // Change is found
+                    // change is found
                     break;
                 }
             }
@@ -896,7 +1074,7 @@ const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a va
         //deletion or replacement
         if (newTextLength === changeStart) {
             // when change was at the end of string
-            // Change is found
+            // change is found
             newChangeEnd = newTextLength;
             oldChangeEnd = oldTextLength;
         }
@@ -905,7 +1083,7 @@ const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a va
                 newChangeEnd = newTextLength - i - 1;
                 oldChangeEnd = oldTextLength - i - 1;
                 if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                    // Change is found
+                    // change is found
                     break;
                 }
             }
@@ -915,12 +1093,12 @@ const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a va
         }
     }
     else {
-        //replacement
+        // replacement
         for (let i = 1; i < oldTextLength && oldTextLength - i >= changeStart; i++) {
             newChangeEnd = newTextLength - i - 1;
             oldChangeEnd = oldTextLength - i - 1;
             if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
-                // Change is found
+                // change is found
                 break;
             }
         }
@@ -935,13 +1113,30 @@ const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a va
     return { changeStart, oldChangeEnd, newChangeEnd };
 };
 /* @conditional-compile-remove(mention) */
+/**
+ * Get the html string for the mention suggestion.
+ *
+ * @private
+ * @param suggestion - The mention suggestion.
+ * @param localeStrings - The locale strings.
+ * @returns The html string for the mention suggestion.
+ */
 const htmlStringForMentionSuggestion = (suggestion, localeStrings) => {
     const idHTML = ' id ="' + suggestion.id + '"';
     const displayTextHTML = ' displayText ="' + suggestion.displayText + '"';
     const displayText = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
-    return '<msft-mention' + idHTML + displayTextHTML + '>' + displayText + '</msft-mention>';
+    return '<' + MSFT_MENTION_TAG + idHTML + displayTextHTML + '>' + displayText + '</' + MSFT_MENTION_TAG + '>';
 };
 /* @conditional-compile-remove(mention) */
+/**
+ * Get display name for the mention suggestion.
+ *
+ * @private
+ *
+ * @param suggestion - The mention suggestion.
+ * @param localeStrings - The locale strings.
+ * @returns The display name for the mention suggestion or display name placeholder if display name is empty.
+ */
 const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
     const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
     return suggestion.displayText !== '' ? suggestion.displayText : displayNamePlaceholder !== null && displayNamePlaceholder !== void 0 ? displayNamePlaceholder : '';
@@ -949,8 +1144,9 @@ const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
 /* @conditional-compile-remove(mention) */
 /**
  * Parse the text and return the tags and the plain text in one go
+ * @private
  * @param text - The text to parse for HTML tags
- * @param trigger The trigger to show for the msft-mention tag in plain text
+ * @param trigger The trigger to show for the mention tag in plain text
  *
  * @returns An array of tags and the plain text representation
  */
@@ -994,7 +1190,7 @@ const textToTagParser = (text, trigger) => {
                 // Tag startIdx is absolute to the text. This is updated later to be relative to the parent tag
                 currentOpenTag.content = text.substring(currentOpenTag.openTagIdx + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);
                 // Insert the plain text pieces for the sub tags
-                if (currentOpenTag.tagType === 'msft-mention') {
+                if (currentOpenTag.tagType === MSFT_MENTION_TAG) {
                     plainTextRepresentation =
                         plainTextRepresentation.slice(0, currentOpenTag.plainTextBeginIndex) +
                             trigger +
@@ -1024,7 +1220,7 @@ const textToTagParser = (text, trigger) => {
         // Update parsing index; move past the end of the close tag
         parseIndex = foundHtmlTag.startIdx + foundHtmlTag.content.length;
     } // While parseIndex < text.length loop
-    return [tags, plainTextRepresentation];
+    return { tags, plainText: plainTextRepresentation };
 };
 /* @conditional-compile-remove(mention) */
 const parseOpenTag = (tag, startIdx) => {