[MOM-1902] ⚡ Fix mentions UI flickering issue, and introduce a custom click outside backdrop for mentions UI.

src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx

@@ -31,5 +31,9 @@ export const AutocompleteMenu = style([
 
 export const AutocompleteMenuHeader = style([
   DefaultReset,
-  { padding: `0 ${config.space.S300}`, flexShrink: 0 },
+  {
+    padding: `0 ${config.space.S300}`,
+    flexShrink: 0,
+    justifyContent: 'space-between',
+  },
 ]);

src/app/components/editor/autocomplete/AutocompleteMenu.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { ReactNode } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { Header, Menu, Scroll, config } from 'folds';
+import { Header, Menu, Scroll, config, Icons, Icon, IconButton } from 'folds';
 
 import * as css from './AutocompleteMenu.css';
 import { preventScrollWithArrowKey } from '../../../utils/keyboard';
@@ -13,12 +14,20 @@ type AutocompleteMenuProps = {
 };
 export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
   return (
-    <div className={css.AutocompleteMenuBase}>
-      <div className={css.AutocompleteMenuContainer}>
+    <div
+      className={css.AutocompleteMenuBase}
+      data-testid="user-mention-autocomplete_outer-div-focus-trap"
+    >
+      <div
+        className={css.AutocompleteMenuContainer}
+        data-testid="user-mention-autocomplete_inner-div-focus-trap"
+      >
         <FocusTrap
+          active
           focusTrapOptions={{
             initialFocus: false,
-            onDeactivate: () => requestClose(),
+            // don't use 'onDeactivate' this when in federation mode
+            // since Momentify is running on React 18
             returnFocusOnDeactivate: false,
             clickOutsideDeactivates: true,
             allowOutsideClick: true,
@@ -29,6 +38,9 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
           <Menu className={css.AutocompleteMenu}>
             <Header className={css.AutocompleteMenuHeader} size="400">
               {headerContent}
+              <IconButton onClick={requestClose}>
+                <Icon src={Icons.Cross} />
+              </IconButton>
             </Header>
             <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
               <div style={{ padding: config.space.S200 }}>{children}</div>

src/app/organisms/room/RoomInput.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-unsafe-optional-chaining */
 import React, {
   KeyboardEventHandler,
   RefObject,
@@ -7,6 +9,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  useLayoutEffect,
 } from 'react';
 import { useAtom } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
@@ -120,6 +123,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const commands = useCommands(mx, room);
 
+    const [clickOutsideHeight, setClickOutsideHeight] = useState<number>(0);
+
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
     const [uploadBoard, setUploadBoard] = useState(true);
@@ -327,6 +332,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       customEditorRef,
     ]);
 
+    const handleCloseAutocomplete = useCallback(() => {
+      setAutocompleteQuery(undefined);
+      ReactEditor.focus(editor);
+    }, [editor]);
+
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
         if (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) {
@@ -344,6 +354,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const handleKeyUp: KeyboardEventHandler = useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
+          handleCloseAutocomplete();
           evt.preventDefault();
           return;
         }
@@ -356,14 +367,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           : undefined;
         setAutocompleteQuery(query);
       },
-      [editor, sendTypingStatus]
+      [editor, handleCloseAutocomplete, sendTypingStatus]
     );
-
-    const handleCloseAutocomplete = useCallback(() => {
-      setAutocompleteQuery(undefined);
-      ReactEditor.focus(editor);
-    }, [editor]);
-
     const handleEmoticonSelect = (key: string, shortcode: string) => {
       editor.insertNode(createEmoticonElement(key, shortcode));
       moveCursor(editor);
@@ -385,8 +390,37 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       });
     };
 
+    useLayoutEffect(() => {
+      // @ts-ignore
+      if (ref?.current && autocompleteQuery) {
+        const elementHeights =
+          document.querySelector(
+            'div[data-testid="user-mention-autocomplete_inner-div-focus-trap"]'
+            // @ts-ignore
+          )?.offsetHeight +
+            // @ts-ignore
+            document.querySelector('div[data-testid="room-view-editor"]')?.offsetHeight || 0;
+        setClickOutsideHeight(elementHeights + 20);
+      }
+    }, [ref, autocompleteQuery]);
+
     return (
-      <div ref={ref} className='app_roomInput'>
+      <div ref={ref} className="app_roomInput">
+        {autocompleteQuery && (
+          <div
+            data-testid="custom-click-outside-backdrop"
+            style={{
+              background: 'transparent',
+              position: 'absolute',
+              left: 0,
+              width: '100vw',
+              height: `calc(100vh - ${clickOutsideHeight}px)`,
+              bottom: `calc(100vh - (100vh - ${clickOutsideHeight}px))`,
+            }}
+            aria-hidden="true"
+            onClick={handleCloseAutocomplete}
+          />
+        )}
         {selectedFiles.length > 0 && (
           <UploadBoard
             header={

src/app/organisms/room/RoomView.jsx

@@ -70,7 +70,7 @@ function RoomView({ room, eventId }) {
           <RoomViewTyping room={room} />
         </div>
         <div className="room-view__sticky">
-          <div className="room-view__editor">
+          <div className="room-view__editor" data-testid="room-view-editor">
             {tombstoneEvent ? (
               <RoomTombstone
                 roomId={roomId}

src/app/organisms/room/message/Message.tsx

@@ -664,9 +664,7 @@ export const Message = as<'div', MessageProps>(
           // onClick={onUserClick}
         >
           {senderAvatarMxc ? (
-            <AvatarImage
-              src={senderAvatarMxc}
-            />
+            <AvatarImage src={senderAvatarMxc} />
           ) : (
             <AvatarFallback
               style={{
@@ -786,7 +784,7 @@ export const Message = as<'div', MessageProps>(
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
-                    className='room_message_edit_btn'
+                    className="room_message_edit_btn"
                   >
                     <Icon src={Icons.Pencil} size="100" />
                   </IconButton>
@@ -936,18 +934,30 @@ export const Message = as<'div', MessageProps>(
           </div>
         )}
         {messageLayout === 1 && (
-          <CompactLayout before={headerJSX} onContextMenu={handleContextMenu} className={'room_message_block_compact'}>
+          <CompactLayout
+            before={headerJSX}
+            onContextMenu={handleContextMenu}
+            className="room_message_block_compact"
+          >
             {msgContentJSX}
           </CompactLayout>
         )}
         {messageLayout === 2 && (
-          <BubbleLayout before={avatarJSX} onContextMenu={handleContextMenu} className={'room_message_block_bubble'}>
+          <BubbleLayout
+            before={avatarJSX}
+            onContextMenu={handleContextMenu}
+            className="room_message_block_bubble"
+          >
             {headerJSX}
             {msgContentJSX}
           </BubbleLayout>
         )}
         {messageLayout !== 1 && messageLayout !== 2 && (
-          <ModernLayout before={avatarJSX} onContextMenu={handleContextMenu} className={'room_message_block_modern'}>
+          <ModernLayout
+            before={avatarJSX}
+            onContextMenu={handleContextMenu}
+            className="room_message_block_modern"
+          >
             {headerJSX}
             {msgContentJSX}
           </ModernLayout>