From 8fa1c2bf2a16ea8d98211818ddfd3ffd796e6931 Mon Sep 17 00:00:00 2001
From: ElementRobot <releases@riot.im>
Date: Tue, 18 Oct 2022 14:07:55 +0100
Subject: [PATCH] [Backport staging] Fix usages of useContextMenu which never
 pass the ref to the element (#9450)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/messages/MessageActionBar.tsx    | 8 ++++----
 src/components/views/rooms/MessageComposerButtons.tsx | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index c510805116..c1637b9a0c 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -83,7 +83,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
     getRelationsForEvent,
 }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
+    const [onFocus, isActive] = useRovingTabIndex(button);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
@@ -123,7 +123,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
             onClick={onOptionsClick}
             onContextMenu={onOptionsClick}
             isExpanded={menuDisplayed}
-            inputRef={ref}
+            inputRef={button}
             onFocus={onFocus}
             tabIndex={isActive ? 0 : -1}
         >
@@ -141,7 +141,7 @@ interface IReactButtonProps {
 
 const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
+    const [onFocus, isActive] = useRovingTabIndex(button);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
@@ -173,7 +173,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
             onClick={onClick}
             onContextMenu={onClick}
             isExpanded={menuDisplayed}
-            inputRef={ref}
+            inputRef={button}
             onFocus={onFocus}
             tabIndex={isActive ? 0 : -1}
         >
diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx
index cc7ce70f44..b77bff66a8 100644
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@@ -179,6 +179,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
             iconClassName="mx_MessageComposer_emoji"
             onClick={openMenu}
             title={_t("Emoji")}
+            inputRef={button}
         />
 
         { contextMenu }