Skip to content

Commit 564d87e

Browse files
carocao-msftcarocao-msft
authored
Merge branch 'main' into carocao/joinCall
2 parents 56eccd4 + 96f80a9 commit 564d87e

11 files changed

Lines changed: 219 additions & 6 deletions

‎change-beta/@azure-communication-react-00d721c4-8922-4e27-a504-61ec5546c6e1.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Fix mention popover content view is not wrapped up in the scroll view when the list is long",
4+
"packageName": "@azure/communication-react",
5+
"email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Fix for the text selection for triple click in TextFieldWithMention",
4+
"packageName": "@azure/communication-react",
5+
"email": "98852890+vhuseinova-msft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change-beta/@azure-communication-react-b0b4088c-70b0-4fa9-928e-d4e1641fb2fa.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "none",
3+
"comment": "[FileCard.test] adding new FileCard unit tests",
4+
"packageName": "@azure/communication-react",
5+
"email": "joshlai@microsoft.com",
6+
"dependentChangeType": "none"
7+
}

‎change/@azure-communication-react-00d721c4-8922-4e27-a504-61ec5546c6e1.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Fix mention popover content view is not wrapped up in the scroll view when the list is long",
4+
"packageName": "@azure/communication-react",
5+
"email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Fix for the text selection for triple click in TextFieldWithMention",
4+
"packageName": "@azure/communication-react",
5+
"email": "98852890+vhuseinova-msft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-b0b4088c-70b0-4fa9-928e-d4e1641fb2fa.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "none",
3+
"comment": "[FileCard.test] adding new FileCard unit tests",
4+
"packageName": "@azure/communication-react",
5+
"email": "joshlai@microsoft.com",
6+
"dependentChangeType": "none"
7+
}

‎packages/react-components/src/components/FileCard.test.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import React from 'react';
5+
import { _FileCard, _FileCardProps } from './FileCard';
6+
import { render, screen } from '@testing-library/react';
7+
import { Icon, IconButton, registerIcons } from '@fluentui/react';
8+
9+
describe('FileCard should be rendered properly', () => {
10+
beforeEach(() => {
11+
registerIcons({
12+
icons: {
13+
docx24_svg: <></>,
14+
cancelfileupload: <></>
15+
}
16+
});
17+
});
18+
19+
it('should render the component', () => {
20+
renderFileCardWithDefaults();
21+
expect(screen.getByText('MockFileCard')).toBeDefined();
22+
});
23+
24+
it('should render the component with progress bar', () => {
25+
renderFileCardWithDefaults({ progress: 0.5 });
26+
const progressIndicator = screen.getByRole('progressbar');
27+
expect(progressIndicator.style.width).toBe('50%');
28+
});
29+
30+
it('should render the component with action icon', () => {
31+
renderFileCardWithDefaults({
32+
actionIcon: (
33+
<IconButton>
34+
<Icon iconName="CancelFileUpload" />
35+
</IconButton>
36+
)
37+
});
38+
39+
const button = screen.getAllByRole('button');
40+
expect(button.length).toBe(1);
41+
});
42+
});
43+
44+
describe('Filecard action handler should be called', () => {
45+
it('should call the action handler when action icon is clicked', () => {
46+
const actionHandler = jest.fn();
47+
renderFileCardWithDefaults({
48+
actionIcon: (
49+
<IconButton>
50+
<Icon iconName="CancelFileUpload" />
51+
</IconButton>
52+
),
53+
actionHandler: actionHandler
54+
});
55+
56+
const button = screen.getAllByRole('button')[0];
57+
button.click();
58+
expect(actionHandler).toBeCalledTimes(1);
59+
});
60+
});
61+
62+
const renderFileCardWithDefaults = (props?: Partial<_FileCardProps>): void => {
63+
const mergedProps: _FileCardProps = {
64+
fileName: 'MockFileCard',
65+
fileExtension: 'docx',
66+
...(props ?? {})
67+
};
68+
69+
render(<_FileCard {...mergedProps} />);
70+
};

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,40 @@ describe('Clicks/Touch should select mention', () => {
272272
expect(input.selectionEnd).toBe((value + suggestions[0].displayText).length);
273273
});
274274

275+
test('Mouse triple click when text starts from mention should select the text in the input field', async () => {
276+
renderSendBox();
277+
// Find the input field
278+
const input = screen.getByRole('textbox') as HTMLInputElement;
279+
act(() => {
280+
// Focus on the input field
281+
input.focus();
282+
});
283+
await waitFor(async () => {
284+
// Type into the input field
285+
await userEvent.keyboard(trigger);
286+
});
287+
// Select the suggestion
288+
await selectFirstMention();
289+
expect(input.value).toBe(trigger + suggestions[0].displayText);
290+
await waitFor(async () => {
291+
// Type into the input field
292+
await userEvent.keyboard(' and');
293+
});
294+
const typedValue = trigger + suggestions[0].displayText + ' and';
295+
// Fix for mousedown issue in userEvent when `document` become null unexpectedly
296+
await act(async () => {
297+
triggerMouseEvent(input, 'mousedown');
298+
});
299+
// Triple click a letter at 14-th index
300+
await userEvent.pointer({
301+
keys: '[MouseLeft][MouseLeft][MouseLeft]',
302+
target: input,
303+
offset: 14
304+
});
305+
expect(input.selectionStart).toBe(0);
306+
expect(input.selectionEnd).toBe(typedValue.length);
307+
});
308+
275309
test('Mouse selection of first word in a mention should select only first word in the mention', async () => {
276310
renderSendBox();
277311
// Find the input field

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,13 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
393393
selectionEndValue?: number;
394394
interactionStartSelection?: { start: number | undefined; end: number | undefined };
395395
}): void => {
396-
if (shouldHandleOnMouseDownDuringSelect) {
396+
if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputTextValue.length) {
397+
// entire text is selected, no need to change anything
398+
setSelectionStartValue(event.currentTarget.selectionStart);
399+
setSelectionEndValue(event.currentTarget.selectionEnd);
400+
setInteractionStartSelection(undefined);
401+
setShouldHandleOnMouseDownDuringSelect(false);
402+
} else if (shouldHandleOnMouseDownDuringSelect) {
397403
if (
398404
interactionStartSelection !== undefined &&
399405
(interactionStartSelection.start !== event.currentTarget.selectionStart ||
@@ -423,15 +429,32 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
423429
});
424430
setInteractionStartSelection(undefined);
425431
setShouldHandleOnMouseDownDuringSelect(false);
426-
} else if (event.currentTarget.selectionStart !== null) {
432+
} else if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionEnd !== null) {
427433
// on select was triggered by mouse down/up with no movement
428434
const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
429435
if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
430436
// handle mention click by selecting the whole mention
431437
// if the selection is not on the bounds of the mention
432-
const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;
433438
// disable selection for clicks on mention bounds
439+
const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;
440+
434441
if (
442+
event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&
443+
event.currentTarget.selectionEnd > mentionEndIndex
444+
) {
445+
// handle triple click when the text starts from mention
446+
if (event.currentTarget.selectionDirection === null) {
447+
event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);
448+
} else {
449+
event.currentTarget.setSelectionRange(
450+
mentionTag.plainTextBeginIndex,
451+
event.currentTarget.selectionEnd,
452+
event.currentTarget.selectionDirection
453+
);
454+
}
455+
setSelectionStartValue(mentionTag.plainTextBeginIndex);
456+
setSelectionEndValue(event.currentTarget.selectionEnd);
457+
} else if (
435458
event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||
436459
(event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&
437460
event.currentTarget.selectionStart !== mentionEndIndex)
@@ -458,7 +481,6 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
458481
setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
459482
}
460483
setInteractionStartSelection(undefined);
461-
setShouldHandleOnMouseDownDuringSelect(false);
462484
}
463485
} else {
464486
// selection was changed by keyboard

‎packages/react-components/src/components/styles/MentionPopover.style.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ export const suggestionListContainerStyle = mergeStyles({
4747
*/
4848
export const suggestionListStyle = mergeStyles({
4949
padding: '0.25rem 0rem 0',
50-
overflow: 'visible'
50+
overflow: 'visible',
51+
overflowY: 'scroll'
5152
});
5253

5354
/**

0 commit comments

Comments
 (0)
⚡