Prevent useContextMenu isOpen from being true if the button ref goes away (#9418)

src/components/structures/ContextMenu.tsx

@@ -565,8 +565,13 @@ type ContextMenuTuple<T> = [
     (val: boolean) => void,
 ];
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<T> => {
-    const button = useRef<T>(null);
+export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T>): ContextMenuTuple<T> => {
+    let button = useRef<T>(null);
+    if (inputRef) {
+        // if we are given a ref, use it instead of ours
+        button = inputRef;
+    }
+
     const [isOpen, setIsOpen] = useState(false);
     const open = (ev?: SyntheticEvent) => {
         ev?.preventDefault();
@@ -579,7 +584,7 @@ export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<
         setIsOpen(false);
     };
 
-    return [isOpen, button, open, close, setIsOpen];
+    return [button.current ? isOpen : false, button, open, close, setIsOpen];
 };
 
 // XXX: Deprecated, used only for dynamic Tooltips. Avoid using at all costs.

src/components/views/location/LocationButton.tsx

@@ -69,6 +69,7 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
             iconClassName="mx_MessageComposer_location"
             onClick={openMenu}
             title={_t("Location")}
+            inputRef={button}
         />
 
         { contextMenu }

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -209,7 +209,8 @@ export function ReadReceiptGroup(
                     onMouseOver={showTooltip}
                     onMouseLeave={hideTooltip}
                     onFocus={showTooltip}
-                    onBlur={hideTooltip}>
+                    onBlur={hideTooltip}
+                >
                     { remText }
                     <span
                         className="mx_ReadReceiptGroup_container"

src/components/views/spaces/SpacePanel.tsx

@@ -204,9 +204,7 @@ const CreateSpaceButton = ({
     isPanelCollapsed,
     setPanelCollapsed,
 }: Pick<IInnerSpacePanelProps, "isPanelCollapsed" | "setPanelCollapsed">) => {
-    // We don't need the handle as we position the menu in a constant location
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [menuDisplayed, _handle, openMenu, closeMenu] = useContextMenu<void>();
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLElement>();
 
     useEffect(() => {
         if (!isPanelCollapsed && menuDisplayed) {
@@ -231,13 +229,14 @@ const CreateSpaceButton = ({
         role="treeitem"
     >
         <SpaceButton
-            data-test-id='create-space-button'
+            data-testid='create-space-button'
             className={classNames("mx_SpaceButton_new", {
                 mx_SpaceButton_newCancel: menuDisplayed,
             })}
             label={menuDisplayed ? _t("Cancel") : _t("Create a space")}
             onClick={onNewClick}
             isNarrow={isPanelCollapsed}
+            ref={handle}
         />
 
         { contextMenu }

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -14,7 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEvent, ComponentProps, ComponentType, createRef, InputHTMLAttributes, LegacyRef } from "react";
+import React, {
+    MouseEvent,
+    ComponentProps,
+    ComponentType,
+    createRef,
+    InputHTMLAttributes,
+    LegacyRef,
+    forwardRef,
+    RefObject,
+} from "react";
 import classNames from "classnames";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@@ -54,7 +63,7 @@ interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButto
     onClick?(ev?: ButtonEvent): void;
 }
 
-export const SpaceButton: React.FC<IButtonProps> = ({
+export const SpaceButton = forwardRef<HTMLElement, IButtonProps>(({
     space,
     spaceKey,
     className,
@@ -67,9 +76,9 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     children,
     ContextMenuComponent,
     ...props
-}) => {
-    const [menuDisplayed, ref, openMenu, closeMenu] = useContextMenu<HTMLElement>();
-    const [onFocus, isActive, handle] = useRovingTabIndex(ref);
+}, ref: RefObject<HTMLElement>) => {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLElement>(ref);
+    const [onFocus, isActive] = useRovingTabIndex(handle);
     const tabIndex = isActive ? 0 : -1;
 
     let avatar = <div className="mx_SpaceButton_avatarPlaceholder"><div className="mx_SpaceButton_icon" /></div>;
@@ -150,7 +159,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
             </div>
         </AccessibleTooltipButton>
     );
-};
+});
 
 interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     space: Room;