Stabilize the scrolling behavior (#2959)

* Stabilize the scrolling behavior

---------
Signed-off-by: Porter Nan <jiangnanhello@live.com>

Author: PorterNan

change-beta/@azure-communication-react-4b1b3a9d-b84c-455a-9550-697253c442be.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Stabilize the scrolling behavior",
+  "packageName": "@azure/communication-react",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-4b1b3a9d-b84c-455a-9550-697253c442be.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Stabilize the scrolling behavior",
+  "packageName": "@azure/communication-react",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/src/captionsSelector.ts

@@ -102,10 +102,12 @@ export const _captionsBannerSelector: _CaptionsBannerSelector = reselect.createS
   [getCaptions, getCaptionsStatus],
   (captions, isCaptionsFeatureActive) => {
     const captionsInfo = captions?.map((c) => {
+      const userId = c.speaker.identifier ? toFlatCommunicationIdentifier(c.speaker.identifier) : '';
       return {
+        id: c.timestamp.getTime() + userId + c.speaker.displayName,
         displayName: c.speaker.displayName ?? 'Unnamed Participant',
         captionText: c.captionText ?? '',
-        userId: c.speaker.identifier ? toFlatCommunicationIdentifier(c.speaker.identifier) : ''
+        userId
       };
     });
     return {

packages/react-components/review/beta/react-components.api.md

@@ -388,6 +388,7 @@ export interface _CaptionsBannerProps {
 
 // @internal
 export type _CaptionsInfo = {
+    id: string;
     displayName: string;
     captionText: string;
     userId?: string;

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

@@ -17,6 +17,7 @@ import { OnRenderAvatarCallback } from '../types';
  * information required for each line of caption
  */
 export type _CaptionsInfo = {
+  id: string;
   displayName: string;
   captionText: string;
   userId?: string;
@@ -85,9 +86,9 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
         <FocusZone as="ul" className={captionsContainerClassName}>
           <Ref innerRef={captionsScrollDivRef}>
             <Stack verticalAlign="start" className={captionsBannerClassName}>
-              {captions.map((caption, key) => {
+              {captions.map((caption) => {
                 return (
-                  <div key={key} className={captionContainerClassName} data-is-focusable={true}>
+                  <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
                     <_Caption {...caption} onRenderAvatar={onRenderAvatar} />
                   </div>
                 );

packages/react-components/src/components/styles/Captions.style.ts

@@ -44,7 +44,7 @@ export const captionsContainerClassName = mergeStyles({
 export const captionContainerClassName = mergeStyles({
   marginTop: _pxToRem(6),
   marginBottom: _pxToRem(6),
-  overflowAnchor: 'none'
+  overflowAnchor: 'auto'
 });
 
 /**

packages/react-components/src/components/utils.ts

@@ -50,12 +50,16 @@ export const dismissError = (dismissedErrors: DismissedError[], toDismiss: Activ
     }
   }
 
+  const toDismissTimestamp = toDismiss.timestamp ?? now;
+
   // Record that this error was dismissed for the first time right now.
   return [
     ...dismissedErrors,
     {
       type: toDismiss.type,
-      dismissedAt: now,
+      // the error time could be sometimes later than the button click time, which cause the dismiss not working
+      // so we set the dismiss time to the later one
+      dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
       activeSince: toDismiss.timestamp
     }
   ];

packages/react-composites/tests/app/call/QueryArgs.ts

@@ -4,6 +4,7 @@
 import { Role } from '@internal/react-components';
 import { CallCompositeOptions } from '../../../src';
 import { MockCallAdapterState } from '../../common';
+import { jsonDateDeserializer } from '../lib/utils';
 
 export interface QueryArgs {
   // Defined only for hermetic tests.
@@ -34,7 +35,9 @@ export function parseQueryArgs(): QueryArgs {
   const params = Object.fromEntries(urlSearchParams.entries());
 
   return {
-    mockCallAdapterState: params.mockCallAdapterState ? JSON.parse(params.mockCallAdapterState) : undefined,
+    mockCallAdapterState: params.mockCallAdapterState
+      ? JSON.parse(params.mockCallAdapterState, jsonDateDeserializer) // json date deserializer is needed because Date objects are serialized as strings by JSON.stringify
+      : undefined,
     useFrLocale: Boolean(params.useFrLocale),
     showCallDescription: Boolean(params.showCallDescription),
     injectParticipantMenuItems: Boolean(params.injectParticipantMenuItems),

packages/react-composites/tests/app/callwithchat/QueryArgs.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { jsonDateDeserializer } from '../lib/utils';
 import type { CallWithChatCompositeOptions, _FakeChatAdapterArgs } from '../../../src';
 import type { MockCallAdapterState } from '../../common';
 
@@ -58,7 +59,9 @@ export function parseQueryArgs(): QueryArgs {
     userId: params.userId ?? '',
 
     fakeChatAdapterArgs: params.fakeChatAdapterArgs ? JSON.parse(params.fakeChatAdapterArgs) : undefined,
-    mockCallAdapterState: params.mockCallAdapterState ? JSON.parse(params.mockCallAdapterState) : undefined,
+    mockCallAdapterState: params.mockCallAdapterState
+      ? JSON.parse(params.mockCallAdapterState, jsonDateDeserializer) // json date deserializer is needed because Date objects are serialized as strings by JSON.stringify
+      : undefined,
 
     customCompositeOptions: params.customCompositeOptions ? JSON.parse(params.customCompositeOptions) : undefined,
     injectCustomButtons: params.injectCustomButtons === 'true',

packages/react-composites/tests/app/lib/utils.tsx

@@ -75,3 +75,13 @@ export function verifyParamExists<T>(param: T, paramName: string): T {
  */
 export const isMobile = (): boolean =>
   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+/**
+ * @private
+ */
+export const jsonDateDeserializer = (key: unknown, value: unknown): unknown => {
+  if (key === 'timestamp' && typeof value === 'string') {
+    return new Date(value);
+  }
+  return value;
+};