Fix context menu being opened when clicking message action bar buttons (#9200)

test/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap

@@ -194,6 +194,8 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
             />
             <div
               className="mx_ContextualMenu"
+              hasBackground={true}
+              onFinished={[MockFunction]}
               role="menu"
               style={Object {}}
             >

test/components/views/messages/MessageActionBar-test.tsx

@@ -240,11 +240,11 @@ describe('<MessageActionBar />', () => {
         });
 
         it('opens message context menu on click', () => {
-            const { findByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { getByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
             act(() => {
                 fireEvent.click(queryByLabelText('Options'));
             });
-            expect(findByTestId('mx_MessageContextMenu')).toBeTruthy();
+            expect(getByTestId('mx_MessageContextMenu')).toBeTruthy();
         });
     });
 
@@ -310,11 +310,11 @@ describe('<MessageActionBar />', () => {
         });
 
         it('opens reaction picker on click', () => {
-            const { queryByLabelText, findByTestId } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText, getByTestId } = getComponent({ mxEvent: alicesMessageEvent });
             act(() => {
                 fireEvent.click(queryByLabelText('React'));
             });
-            expect(findByTestId('mx_ReactionPicker')).toBeTruthy();
+            expect(getByTestId('mx_EmojiPicker')).toBeTruthy();
         });
     });
 
@@ -565,4 +565,38 @@ describe('<MessageActionBar />', () => {
             });
         });
     });
+
+    it.each([
+        ["React"],
+        ["Reply"],
+        ["Reply in thread"],
+        ["Favourite"],
+        ["Edit"],
+    ])("does not show context menu when right-clicking", (buttonLabel: string) => {
+        // For favourite button
+        jest.spyOn(SettingsStore, 'getValue').mockReturnValue(true);
+
+        const event = new MouseEvent("contextmenu", {
+            bubbles: true,
+            cancelable: true,
+        });
+        event.stopPropagation = jest.fn();
+        event.preventDefault = jest.fn();
+
+        const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+        act(() => {
+            fireEvent(queryByLabelText(buttonLabel), event);
+        });
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(queryByTestId("mx_MessageContextMenu")).toBeFalsy();
+    });
+
+    it("does shows context menu when right-clicking options", () => {
+        const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+        act(() => {
+            fireEvent.contextMenu(queryByLabelText("Options"));
+        });
+        expect(queryByTestId("mx_MessageContextMenu")).toBeTruthy();
+    });
 });