[Chat] Fix triple click selection for TextFieldithMention when mention is added in the beginning of the text (#3336)

Author: vhuseinova-msft

change-beta/@azure-communication-react-7b4814b9-efd9-4260-80cb-d88667c8e5d7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix for the text selection for triple click in TextFieldWithMention",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-7b4814b9-efd9-4260-80cb-d88667c8e5d7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix for the text selection for triple click in TextFieldWithMention",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/SendBox.test.tsx

@@ -272,6 +272,40 @@ describe('Clicks/Touch should select mention', () => {
     expect(input.selectionEnd).toBe((value + suggestions[0].displayText).length);
   });
 
+  test('Mouse triple click when text starts from mention should select the text in the input field', async () => {
+    renderSendBox();
+    // Find the input field
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    act(() => {
+      // Focus on the input field
+      input.focus();
+    });
+    await waitFor(async () => {
+      // Type into the input field
+      await userEvent.keyboard(trigger);
+    });
+    // Select the suggestion
+    await selectFirstMention();
+    expect(input.value).toBe(trigger + suggestions[0].displayText);
+    await waitFor(async () => {
+      // Type into the input field
+      await userEvent.keyboard(' and');
+    });
+    const typedValue = trigger + suggestions[0].displayText + ' and';
+    // Fix for mousedown issue in userEvent when `document` become null unexpectedly
+    await act(async () => {
+      triggerMouseEvent(input, 'mousedown');
+    });
+    // Triple click a letter at 14-th index
+    await userEvent.pointer({
+      keys: '[MouseLeft][MouseLeft][MouseLeft]',
+      target: input,
+      offset: 14
+    });
+    expect(input.selectionStart).toBe(0);
+    expect(input.selectionEnd).toBe(typedValue.length);
+  });
+
   test('Mouse selection of first word in a mention should select only first word in the mention', async () => {
     renderSendBox();
     // Find the input field

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

@@ -393,7 +393,13 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
       selectionEndValue?: number;
       interactionStartSelection?: { start: number | undefined; end: number | undefined };
     }): void => {
-      if (shouldHandleOnMouseDownDuringSelect) {
+      if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputTextValue.length) {
+        // entire text is selected, no need to change anything
+        setSelectionStartValue(event.currentTarget.selectionStart);
+        setSelectionEndValue(event.currentTarget.selectionEnd);
+        setInteractionStartSelection(undefined);
+        setShouldHandleOnMouseDownDuringSelect(false);
+      } else if (shouldHandleOnMouseDownDuringSelect) {
         if (
           interactionStartSelection !== undefined &&
           (interactionStartSelection.start !== event.currentTarget.selectionStart ||
@@ -423,15 +429,32 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
           });
           setInteractionStartSelection(undefined);
           setShouldHandleOnMouseDownDuringSelect(false);
-        } else if (event.currentTarget.selectionStart !== null) {
+        } else if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionEnd !== null) {
           // on select was triggered by mouse down/up with no movement
           const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
           if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
             // handle mention click by selecting the whole mention
             // if the selection is not on the bounds of the mention
-            const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;
             // disable selection for clicks on mention bounds
+            const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;
+
             if (
+              event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&
+              event.currentTarget.selectionEnd > mentionEndIndex
+            ) {
+              // handle triple click when the text starts from mention
+              if (event.currentTarget.selectionDirection === null) {
+                event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);
+              } else {
+                event.currentTarget.setSelectionRange(
+                  mentionTag.plainTextBeginIndex,
+                  event.currentTarget.selectionEnd,
+                  event.currentTarget.selectionDirection
+                );
+              }
+              setSelectionStartValue(mentionTag.plainTextBeginIndex);
+              setSelectionEndValue(event.currentTarget.selectionEnd);
+            } else if (
               event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||
               (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&
                 event.currentTarget.selectionStart !== mentionEndIndex)
@@ -458,7 +481,6 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
             setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
           }
           setInteractionStartSelection(undefined);
-          setShouldHandleOnMouseDownDuringSelect(false);
         }
       } else {
         // selection was changed by keyboard