fix: popover positioning for chat component (#2774)

moves popovers to be rendered inline and sets a z-index to ensure that popovers are above the messages list

Author: gavinbarron

.yarn/install-state.gz

@@ -40,8 +40,8 @@
     "watch": "lerna run --parallel --stream --scope '@microsoft/*' --ignore '@microsoft/mgt' --ignore '@microsoft/mgt-spf*' --ignore '@microsoft/mgt-sharepoint-provider' --ignore '@microsoft/mgt-electron-provider' --ignore '@microsoft/mgt-teamsfx-provider' --ignore '@microsoft/mgt-proxy-provider' build:watch ",
     "watch:serve": "npm-run-all --parallel watch serve",
     "watch:serve:https": "npm-run-all -parallel watch serve:https",
-    "watch:chat-library": "lerna run build:watch --scope @microsoft/mgt-chat --include-dependents",
-    "watch:chat-test-app": "lerna run start --scope react-chat",
+    "watch:chat-library": "lerna run build:watch --scope @microsoft/mgt-chat --include-dependencies",
+    "watch:chat-test-app": "lerna run start --scope react-chat --include-dependencies",
     "watch:chat": "npm-run-all --parallel watch:chat-library watch:chat-test-app",
     "watch:components": "lerna run --parallel build:watch --scope @microsoft/mgt-components --include-dependents --include-dependencies",
     "watch:react-contoso": "lerna run start --scope react-contoso",

package.json

@@ -36,6 +36,9 @@ const useStyles = makeStyles({
   chatInput: {
     ...shorthands.overflow('unset')
   },
+  chatHeader: {
+    zIndex: 2
+  },
   fullHeight: {
     height: '100%'
   },
@@ -94,19 +97,21 @@ export const Chat = ({ chatId }: IMgtChatProps) => {
         <div className={styles.chat}>
           {chatState.userId && chatId && chatState.messages.length > 0 ? (
             <>
-              <ChatHeader
-                chat={chatState.chat}
-                currentUserId={chatState.userId}
-                onRenameChat={chatState.onRenameChat}
-              />
-              {chatState.participants?.length > 0 && chatState.chat?.chatType === 'group' && (
-                <ManageChatMembers
-                  members={chatState.participants}
-                  removeChatMember={chatState.onRemoveChatMember}
+              <div className={styles.chatHeader}>
+                <ChatHeader
+                  chat={chatState.chat}
                   currentUserId={chatState.userId}
-                  addChatMembers={chatState.onAddChatMembers}
+                  onRenameChat={chatState.onRenameChat}
                 />
-              )}
+                {chatState.participants?.length > 0 && chatState.chat?.chatType === 'group' && (
+                  <ManageChatMembers
+                    members={chatState.participants}
+                    removeChatMember={chatState.onRemoveChatMember}
+                    currentUserId={chatState.userId}
+                    addChatMembers={chatState.onAddChatMembers}
+                  />
+                )}
+              </div>
               <div className={styles.chatMessages}>
                 <MessageThread
                   userId={chatState.userId}

packages/mgt-chat/src/components/Chat/Chat.tsx

@@ -14,6 +14,7 @@ import {
   makeStyles,
   tokens
 } from '@fluentui/react-components';
+import type { PopoverProps } from '@fluentui/react-components';
 
 interface ChatHeaderProps {
   chat?: Chat;
@@ -77,10 +78,19 @@ const GroupChatHeader = ({ chat, currentUserId, onRenameChat }: ChatHeaderProps)
   const chatTitle = chat?.topic
     ? chat.topic
     : reduceToFirstNamesList(chat?.members as AadUserConversationMember[], currentUserId);
+  const trapFocus = true;
+  const popoverProps: Partial<PopoverProps> = {
+    trapFocus,
+    inertTrapFocus: trapFocus,
+    inline: true,
+    positioning: 'below-start',
+    open: isPopoverOpen,
+    onOpenChange: handleOpenChange
+  };
   return (
     <>
       {chatTitle}
-      <Popover trapFocus positioning={'below-start'} open={isPopoverOpen} onOpenChange={handleOpenChange}>
+      <Popover {...popoverProps}>
         <PopoverTrigger>
           <Button appearance="transparent" icon={<EditIcon />} aria-label="Name group chat"></Button>
         </PopoverTrigger>
@@ -126,7 +136,7 @@ const getOtherParticipantUserId = (chat?: Chat, currentUserId = '') =>
  * For group chats with no topic it will show the first names of other participants comma separated.
  * For 1:1 chats it will show the first name of the other participant.
  */
-const ChatHeader = memo(({ chat, currentUserId, onRenameChat }: ChatHeaderProps) => {
+const ChatHeader = ({ chat, currentUserId, onRenameChat }: ChatHeaderProps) => {
   const styles = useStyles();
   return (
     <div className={styles.chatHeader}>
@@ -137,6 +147,6 @@ const ChatHeader = memo(({ chat, currentUserId, onRenameChat }: ChatHeaderProps)
       )}
     </div>
   );
-});
+};
 
-export default ChatHeader;
+export default memo(ChatHeader);

packages/mgt-chat/src/components/ChatHeader/ChatHeader.tsx

@@ -12,7 +12,8 @@ import {
   DialogContent,
   DialogSurface,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
+  PopoverProps
 } from '@fluentui/react-components';
 import {
   bundleIcon,
@@ -60,9 +61,17 @@ const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatM
     }
     closeCallout();
   }, [removeChatMember, members, currentUserId, closeCallout]);
-
+  const trapFocus = true;
+  const popoverProps: Partial<PopoverProps> = {
+    trapFocus,
+    inertTrapFocus: trapFocus,
+    inline: true,
+    positioning: 'below-start',
+    open: isPopoverOpen,
+    onOpenChange: handleOpenChange
+  };
   return (
-    <Popover trapFocus positioning={'below-start'} open={isPopoverOpen} onOpenChange={handleOpenChange}>
+    <Popover {...popoverProps}>
       <PopoverTrigger>
         <Button className={styles.triggerButton} appearance="transparent" icon={<AddPeople />}>
           {members.length}
@@ -97,7 +106,7 @@ const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatM
               <DialogSurface>
                 <DialogBody>
                   <DialogTitle>Leave the conversation?</DialogTitle>
-                  <DialogContent>You'll still have access to the chat history.</DialogContent>
+                  <DialogContent>You&apos;ll still have access to the chat history.</DialogContent>
                   <DialogActions>
                     <DialogTrigger disableButtonEnhancement>
                       <Button appearance="secondary" onClick={closeCallout}>

packages/mgt-chat/src/components/ManageChatMembers/ManageChatMembers.tsx

@@ -58,7 +58,7 @@ const styles = {
     columnGap: '4px'
   }),
   triggerButton: mergeStyles({
-    minWidth: 'max-content',
+    minWidth: 'unset !important',
     width: 'max-content'
   })
 };