Fix issues with the new topic dialog

res/css/views/rooms/_RoomHeader.scss

@@ -142,6 +142,7 @@ limitations under the License.
 
 .mx_RoomTopic {
     position: relative;
+    cursor: pointer;
 }
 
 .mx_RoomHeader_topic {

src/components/views/elements/Linkify.tsx

@@ -14,26 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useRef } from "react";
-import linkifyElement from "linkify-element";
+import React, { useLayoutEffect, useRef } from "react";
+
+import { linkifyElement } from "../../../HtmlUtils";
 
 interface Props {
     as?: string;
     children: React.ReactNode;
+    onClick?: (ev: MouseEvent) => void;
 }
 
 export function Linkify({
     as = "div",
     children,
+    onClick,
 }: Props): JSX.Element {
     const ref = useRef();
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         linkifyElement(ref.current);
     }, [children]);
 
     return React.createElement(as, {
         children,
         ref,
+        onClick,
     });
 }
+

src/components/views/elements/RoomTopic.tsx

@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext, useEffect, useRef } from "react";
+import React, { useCallback, useContext, useRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from "classnames";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 
-import { linkifyElement } from "../../../HtmlUtils";
 import { useTopic } from "../../../hooks/room/useTopic";
 import useHover from "../../../hooks/useHover";
 import Tooltip, { Alignment } from "./Tooltip";
@@ -43,7 +42,7 @@ export default function RoomTopic({
 }: IProps) {
     const client = useContext(MatrixClientContext);
     const ref = useRef<HTMLDivElement>();
-    const hovered = useHover(ref);
+    const hovered = useHover(ref, true);
 
     const topic = useTopic(room);
 
@@ -64,7 +63,16 @@ export default function RoomTopic({
             const modal = Modal.createDialog(InfoDialog, {
                 title: room.name,
                 description: <div>
-                    <Linkify as="p">{ topic }</Linkify>
+                    <Linkify
+                        as="p"
+                        onClick={(ev: MouseEvent) => {
+                            if ((ev.target as HTMLElement).tagName.toUpperCase() === "A") {
+                                modal.close();
+                            }
+                        }}
+                    >
+                        { topic }
+                    </Linkify>
                     { canSetTopic && <AccessibleButton
                         kind="primary_outline"
                         onClick={() => {
@@ -80,10 +88,6 @@ export default function RoomTopic({
         }
     });
 
-    useEffect(() => {
-        linkifyElement(ref.current);
-    }, [topic]);
-
     const className = classNames(props.className, "mx_RoomTopic");
 
     return <div {...props}
@@ -92,7 +96,9 @@ export default function RoomTopic({
         dir="auto"
         className={className}
     >
-        { topic }
+        <Linkify>
+            { topic }
+        </Linkify>
         { hovered && (
             <Tooltip label={_t("Click to read topic")} alignment={Alignment.Bottom} />
         ) }

src/hooks/useHover.ts

@@ -14,28 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-export default function useHover(ref: React.MutableRefObject<HTMLElement>) {
+export default function useHover(ref: React.MutableRefObject<HTMLElement>, ignoreAnchors = false) {
     const [hovered, setHoverState] = useState(false);
 
     const handleMouseOver = () => setHoverState(true);
     const handleMouseOut = () => setHoverState(false);
+    const handleMouseMove = useCallback((ev: MouseEvent): void => {
+        if (!ignoreAnchors) return;
+
+        if ((ev.target as HTMLElement).tagName.toUpperCase() === "A") {
+            setHoverState(false);
+        } else {
+            setHoverState(true);
+        }
+    }, [ignoreAnchors]);
 
     useEffect(
         () => {
             const node = ref.current;
             if (node) {
                 node.addEventListener("mouseover", handleMouseOver);
                 node.addEventListener("mouseout", handleMouseOut);
+                node.addEventListener("mousemove", handleMouseMove);
 
                 return () => {
                     node.removeEventListener("mouseover", handleMouseOver);
                     node.removeEventListener("mouseout", handleMouseOut);
+                    node.removeEventListener("mousemove", handleMouseMove);
                 };
             }
         },
-        [ref],
+        [ref, handleMouseMove],
     );
 
     return hovered;