Fix wrong room topic tooltip position (#10667)

* Fix wrong room topic tooltip position

* Update snapshots

* Fix tests

src/components/views/elements/RoomTopic.tsx

@@ -103,10 +103,17 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
     const className = classNames(props.className, "mx_RoomTopic");
 
     return (
-        <div {...props} ref={ref} onClick={onClick} dir="auto" className={className}>
+        <TooltipTarget
-            <TooltipTarget label={_t("Click to read topic")} alignment={Alignment.Bottom} ignoreHover={ignoreHover}>
+            {...props}
+            ref={ref}
+            onClick={onClick}
+            dir="auto"
+            tooltipTargetClassName={className}
+            label={_t("Click to read topic")}
+            alignment={Alignment.Bottom}
+            ignoreHover={ignoreHover}
+        >
             <Linkify>{body}</Linkify>
         </TooltipTarget>
-        </div>
     );
 }

src/components/views/elements/TooltipTarget.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 
 import useFocus from "../../../hooks/useFocus";
 import useHover from "../../../hooks/useHover";
@@ -29,7 +29,9 @@ interface IProps extends HTMLAttributes<HTMLSpanElement>, Omit<ITooltipProps, "v
  * Generic tooltip target element that handles tooltip visibility state
  * and displays children
  */
-const TooltipTarget: React.FC<IProps> = ({
+const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
+    (
+        {
             children,
             tooltipTargetClassName,
             // tooltip pass through props
@@ -41,7 +43,9 @@ const TooltipTarget: React.FC<IProps> = ({
             maxParentWidth,
             ignoreHover,
             ...rest
-}) => {
+        },
+        ref,
+    ) => {
         const [isFocused, focusProps] = useFocus();
         const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
 
@@ -67,11 +71,13 @@ const TooltipTarget: React.FC<IProps> = ({
                 aria-describedby={id}
                 className={tooltipTargetClassName}
                 {...rest}
+                ref={ref}
             >
                 {children}
                 {tooltip}
             </div>
         );
-};
+    },
+);
 
 export default TooltipTarget;

test/PosthogAnalytics-test.ts

@@ -52,7 +52,8 @@ describe("PosthogAnalytics", () => {
     beforeEach(() => {
         fakePosthog = getFakePosthog();
 
-        window.crypto = {
+        Object.defineProperty(window, "crypto", {
+            value: {
                 subtle: {
                     digest: async (_: AlgorithmIdentifier, encodedMessage: BufferSource) => {
                         const message = new TextDecoder().decode(encodedMessage);
@@ -61,15 +62,17 @@ describe("PosthogAnalytics", () => {
                         for (let c = 0; c < hexHash.length; c += 2) {
                             bytes.push(parseInt(hexHash.slice(c, c + 2), 16));
                         }
-                    return bytes as unknown as ArrayBuffer;
+                        return bytes;
                     },
-            } as unknown as SubtleCrypto,
+                },
-        } as unknown as Crypto;
+            },
+        });
     });
 
     afterEach(() => {
-        // @ts-ignore
+        Object.defineProperty(window, "crypto", {
-        window.crypto = null;
+            value: null,
+        });
         SdkConfig.unset(); // we touch the config, so clean up
     });
 

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -55,8 +55,6 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
-        >
-          <div
           tabindex="0"
         >
           <span
@@ -64,7 +62,6 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
           />
         </div>
       </div>
-      </div>
     </header>
     <div
       class="mx_RoomView_body"
@@ -149,8 +146,6 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
-        >
-          <div
           tabindex="0"
         >
           <span
@@ -158,7 +153,6 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           />
         </div>
       </div>
-      </div>
     </header>
     <main
       class="mx_RoomView_body"
@@ -339,8 +333,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
-        >
-          <div
           tabindex="0"
         >
           <span
@@ -348,7 +340,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
           />
         </div>
       </div>
-      </div>
     </header>
     <main
       class="mx_RoomView_body"
@@ -606,8 +597,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
-        >
-          <div
           tabindex="0"
         >
           <span
@@ -615,7 +604,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           />
         </div>
       </div>
-      </div>
     </header>
     <main
       class="mx_RoomView_body"

test/utils/MegolmExportEncryption-test.ts

@@ -75,13 +75,13 @@ describe("MegolmExportEncryption", function () {
     let MegolmExportEncryption: typeof MegolmExportEncryptionExport;
 
     beforeEach(() => {
-        window.crypto = {
+        Object.defineProperty(window, "crypto", {
+            value: {
                 getRandomValues,
                 randomUUID: jest.fn().mockReturnValue("not-random-uuid"),
                 subtle: webCrypto.subtle,
-        };
+            },
-        // @ts-ignore for some reason including it in the object above gets ignored
+        });
-        window.crypto.subtle = webCrypto.subtle;
         MegolmExportEncryption = require("../../src/utils/MegolmExportEncryption");
     });