Link creation menu fix

packages/react/src/FormattingToolbar/components/LinkToolbarButton.tsx

@@ -20,7 +20,8 @@ export const LinkToolbarButton = (props: HyperlinkButtonProps) => {
   const [creationMenu, setCreationMenu] = useState<any>();
   const [creationMenuOpen, setCreationMenuOpen] = useState(false);
 
-  const ref = useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   // TODO: review code; does this pattern still make sense?
   const updateCreationMenu = useCallback(() => {
@@ -33,17 +34,22 @@ export const LinkToolbarButton = (props: HyperlinkButtonProps) => {
           props.setHyperlink(url, text);
           setCreationMenuOpen(false);
         }}
+        ref={menuRef}
       />
     );
   }, [props]);
 
   const handleClick = useCallback(
     (event: MouseEvent) => {
-      if (ref.current?.contains(event.target as HTMLElement)) {
+      if (buttonRef.current?.contains(event.target as HTMLElement)) {
         setCreationMenuOpen(!creationMenuOpen);
         return;
       }
 
+      if (menuRef.current?.contains(event.target as HTMLElement)) {
+        return;
+      }
+
       setCreationMenuOpen(false);
     },
     [creationMenuOpen]
@@ -67,7 +73,7 @@ export const LinkToolbarButton = (props: HyperlinkButtonProps) => {
         mainTooltip={props.mainTooltip}
         secondaryTooltip={props.secondaryTooltip}
         icon={props.icon}
-        ref={ref}
+        ref={buttonRef}
       />
     </Tippy>
   );

packages/react/src/HyperlinkToolbar/EditHyperlinkMenu/components/EditHyperlinkMenu.tsx

@@ -1,5 +1,5 @@
 import { createStyles, Stack } from "@mantine/core";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { RiLink, RiText } from "react-icons/ri";
 import { EditHyperlinkMenuItem } from "./EditHyperlinkMenuItem";
 
@@ -13,7 +13,10 @@ export type EditHyperlinkMenuProps = {
  * Menu which opens when editing an existing hyperlink or creating a new one.
  * Provides input fields for setting the hyperlink URL and title.
  */
-export const EditHyperlinkMenu = (props: EditHyperlinkMenuProps) => {
+export const EditHyperlinkMenu = forwardRef<
+  HTMLDivElement,
+  EditHyperlinkMenuProps
+>((props, ref) => {
   const { classes } = createStyles({ root: {} })(undefined, {
     name: "EditHyperlinkMenu",
   });
@@ -22,7 +25,7 @@ export const EditHyperlinkMenu = (props: EditHyperlinkMenuProps) => {
   const [title, setTitle] = useState(props.text);
 
   return (
-    <Stack className={classes.root}>
+    <Stack className={classes.root} ref={ref}>
       <EditHyperlinkMenuItem
         icon={RiLink}
         mainIconTooltip={"Edit URL"}
@@ -42,4 +45,4 @@ export const EditHyperlinkMenu = (props: EditHyperlinkMenuProps) => {
       />
     </Stack>
   );
-};
+});