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 label={_t("Click to read topic")} alignment={Alignment.Bottom} ignoreHover={ignoreHover}>
-                <Linkify>{body}</Linkify>
-            </TooltipTarget>
-        </div>
+        <TooltipTarget
+            {...props}
+            ref={ref}
+            onClick={onClick}
+            dir="auto"
+            tooltipTargetClassName={className}
+            label={_t("Click to read topic")}
+            alignment={Alignment.Bottom}
+            ignoreHover={ignoreHover}
+        >
+            <Linkify>{body}</Linkify>
+        </TooltipTarget>
     );
 }

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,49 +29,55 @@ 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> = ({
-    children,
-    tooltipTargetClassName,
-    // tooltip pass through props
-    className,
-    id,
-    label,
-    alignment,
-    tooltipClassName,
-    maxParentWidth,
-    ignoreHover,
-    ...rest
-}) => {
-    const [isFocused, focusProps] = useFocus();
-    const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
+const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
+    (
+        {
+            children,
+            tooltipTargetClassName,
+            // tooltip pass through props
+            className,
+            id,
+            label,
+            alignment,
+            tooltipClassName,
+            maxParentWidth,
+            ignoreHover,
+            ...rest
+        },
+        ref,
+    ) => {
+        const [isFocused, focusProps] = useFocus();
+        const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
 
-    // No need to fill up the DOM with hidden tooltip elements. Only add the
-    // tooltip when we're hovering over the item (performance)
-    const tooltip = (isFocused || isHovering) && (
-        <Tooltip
-            id={id}
-            className={className}
-            tooltipClassName={tooltipClassName}
-            label={label}
-            alignment={alignment}
-            visible={isFocused || isHovering}
-            maxParentWidth={maxParentWidth}
-        />
-    );
+        // No need to fill up the DOM with hidden tooltip elements. Only add the
+        // tooltip when we're hovering over the item (performance)
+        const tooltip = (isFocused || isHovering) && (
+            <Tooltip
+                id={id}
+                className={className}
+                tooltipClassName={tooltipClassName}
+                label={label}
+                alignment={alignment}
+                visible={isFocused || isHovering}
+                maxParentWidth={maxParentWidth}
+            />
+        );
 
-    return (
-        <div
-            {...hoverProps}
-            {...focusProps}
-            tabIndex={0}
-            aria-describedby={id}
-            className={tooltipTargetClassName}
-            {...rest}
-        >
-            {children}
-            {tooltip}
-        </div>
-    );
-};
+        return (
+            <div
+                {...hoverProps}
+                {...focusProps}
+                tabIndex={0}
+                aria-describedby={id}
+                className={tooltipTargetClassName}
+                {...rest}
+                ref={ref}
+            >
+                {children}
+                {tooltip}
+            </div>
+        );
+    },
+);
 
 export default TooltipTarget;

test/PosthogAnalytics-test.ts

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

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

@@ -55,14 +55,11 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
+          tabindex="0"
         >
-          <div
-            tabindex="0"
-          >
-            <span
-              dir="auto"
-            />
-          </div>
+          <span
+            dir="auto"
+          />
         </div>
       </div>
     </header>
@@ -149,14 +146,11 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
+          tabindex="0"
         >
-          <div
-            tabindex="0"
-          >
-            <span
-              dir="auto"
-            />
-          </div>
+          <span
+            dir="auto"
+          />
         </div>
       </div>
     </header>
@@ -339,14 +333,11 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
+          tabindex="0"
         >
-          <div
-            tabindex="0"
-          >
-            <span
-              dir="auto"
-            />
-          </div>
+          <span
+            dir="auto"
+          />
         </div>
       </div>
     </header>
@@ -606,14 +597,11 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         <div
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
+          tabindex="0"
         >
-          <div
-            tabindex="0"
-          >
-            <span
-              dir="auto"
-            />
-          </div>
+          <span
+            dir="auto"
+          />
         </div>
       </div>
     </header>

test/utils/MegolmExportEncryption-test.ts

@@ -75,13 +75,13 @@ describe("MegolmExportEncryption", function () {
     let MegolmExportEncryption: typeof MegolmExportEncryptionExport;
 
     beforeEach(() => {
-        window.crypto = {
-            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;
+        Object.defineProperty(window, "crypto", {
+            value: {
+                getRandomValues,
+                randomUUID: jest.fn().mockReturnValue("not-random-uuid"),
+                subtle: webCrypto.subtle,
+            },
+        });
         MegolmExportEncryption = require("../../src/utils/MegolmExportEncryption");
     });