[Chat] Added mentions list navigation by keyboard (#3958)

Author: vhuseinova-msft

change-beta/@azure-communication-react-29a6bb75-b690-4565-a0e9-5885f3aa41d0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Mentions",
+  "comment": "Fixed an issues when mentions list wasn't scrolled when navigated by keyboard",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-29a6bb75-b690-4565-a0e9-5885f3aa41d0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Mentions",
+  "comment": "Fixed an issues when mentions list wasn't scrolled when navigated by keyboard",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -3,16 +3,18 @@
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';
+import { mergeClasses } from '@fluentui/react-components';
 import {
   mentionPopoverContainerStyle,
   headerStyleThemed,
-  suggestionListStyle,
   suggestionItemStackStyle,
-  suggestionItemWrapperStyle
+  suggestionItemWrapperStyle,
+  useSuggestionListStyle
 } from './styles/MentionPopover.style';
 /* @conditional-compile-remove(mention) */
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
+import { useDefaultStackStyles } from './styles/Stack.style';
 
 /**
  * Props for {@link _MentionPopover}.
@@ -165,10 +167,13 @@ export const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {
   const ids = useIdentifiers();
   const localeStrings = useLocale().strings;
   const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+  const suggestionsListRef = useRef<HTMLDivElement>(null);
 
   const [position, setPosition] = useState<Position | undefined>();
   const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);
-  const [changedSelection, setChangedSelection] = useState<boolean | undefined>(undefined); // Selection UI as per teams
+
+  const suggestionListStyle = useSuggestionListStyle();
+  const defaultStackStyles = useDefaultStackStyles();
 
   const dismissPopoverWhenClickingOutside = useCallback(
     (e: MouseEvent) => {
@@ -181,12 +186,13 @@ export const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {
   );
 
   useEffect(() => {
-    if (changedSelection === undefined) {
-      setChangedSelection(false);
-    } else if (changedSelection === false) {
-      setChangedSelection(true);
+    if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
+      const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
+      if (selectedItem) {
+        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
     }
-  }, [activeSuggestionIndex, changedSelection]);
+  }, [activeSuggestionIndex]);
 
   useEffect(() => {
     window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
@@ -266,11 +272,7 @@ export const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {
         >
           <Stack
             horizontal
-            className={suggestionItemStackStyle(
-              theme,
-              hoveredSuggestion?.id === suggestion.id,
-              (changedSelection ?? false) && active
-            )}
+            className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}
           >
             {personaRenderer(suggestion.displayText)}
           </Stack>
@@ -283,7 +285,6 @@ export const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {
       /* @conditional-compile-remove(mention) */
       ids,
       hoveredSuggestion,
-      changedSelection,
       personaRenderer
     ]
   );
@@ -317,18 +318,20 @@ export const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {
           <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>
             {getHeaderTitle()}
           </Stack.Item>
-          <Stack
+          {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}
+          <div
+            className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}
             /* @conditional-compile-remove(mention) */
             data-ui-id={ids.mentionSuggestionList}
-            className={suggestionListStyle}
+            ref={suggestionsListRef}
           >
             {suggestions.map((suggestion, index) => {
               const active = index === activeSuggestionIndex;
               return onRenderSuggestionItem
                 ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
                 : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
             })}
-          </Stack>
+          </div>
         </Stack>
       )}
     </div>

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

@@ -220,7 +220,7 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
       if (isEnterKeyEventFromCompositionSession(ev)) {
         return;
       }
-
+      let isActiveSuggestionIndexUpdated = false;
       if (mentionSuggestions.length > 0) {
         if (ev.key === 'ArrowUp') {
           ev.preventDefault();
@@ -229,15 +229,20 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
               ? mentionSuggestions.length - 1
               : Math.max(activeSuggestionIndex - 1, 0);
           setActiveSuggestionIndex(newActiveIndex);
+          isActiveSuggestionIndexUpdated = true;
         } else if (ev.key === 'ArrowDown') {
           ev.preventDefault();
           const newActiveIndex =
             activeSuggestionIndex === undefined
               ? 0
               : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
           setActiveSuggestionIndex(newActiveIndex);
+          isActiveSuggestionIndexUpdated = true;
         } else if (ev.key === 'Escape') {
           updateMentionSuggestions([]);
+          // reset active suggestion index when suggestions are closed
+          setActiveSuggestionIndex(undefined);
+          isActiveSuggestionIndexUpdated = true;
         }
       }
       if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
@@ -253,6 +258,10 @@ export const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Elem
         }
 
         onEnterKeyDown && onEnterKeyDown();
+      } else if (!isActiveSuggestionIndexUpdated) {
+        // Update the active suggestion index if the user is typing,
+        // otherwise the focus will be lost
+        setActiveSuggestionIndex(undefined);
       }
       onKeyDown && onKeyDown(ev);
     },

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

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import { IStackStyles, mergeStyles, Theme } from '@fluentui/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 /**
  * @private
@@ -41,18 +42,22 @@ export const suggestionListContainerStyle = mergeStyles({
 /**
  * @private
  */
-export const suggestionListStyle = mergeStyles({
-  padding: '0.25rem 0rem 0',
-  overflow: 'visible',
-  overflowY: 'scroll'
+export const useSuggestionListStyle = makeStyles({
+  root: {
+    ...shorthands.padding('0.25rem', '0rem', '0rem'),
+    ...shorthands.overflow('visible'),
+    overflowY: 'scroll'
+  }
 });
 
 /**
  * @private
  */
 export const suggestionItemWrapperStyle = (theme: Theme): string => {
   return mergeStyles({
-    margin: '0.05rem 0',
+    margin: '0.0625rem 0',
+    'scroll-margin-top': '0.0625rem',
+    'scroll-margin-bottom': '0.0625rem',
     '&:focus-visible': {
       outline: `${theme.palette.black} solid 0.1rem`
     }

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

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { makeStyles } from '@fluentui/react-components';
+
+// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.
+// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page
+
+/**
+ * @private
+ */
+export const useDefaultStackStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+    width: 'auto',
+    height: 'auto',
+    boxSizing: 'border-box',
+    '> *': {
+      textOverflow: 'ellipsis'
+    }
+    // As per CSS props, these two styles are not in the original Stack styles
+    // (and they have higher specificity that just classes and will be applied instead of rules in classes).
+    // They also break a layout for the first selected item in MentionPopover if applied.
+    // Please check that component, if you want to apply these styles
+    // '> :not(:first-child)': {
+    //   marginTop: '0px'
+    // },
+    // '> *:not(.ms-StackItem)': {
+    //   flexShrink: 1
+    // }
+  }
+});