From 149a699f3d1abcc6b2f0f5d016272f0834367238 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Fri, 19 Mar 2021 18:08:37 +0100
Subject: [PATCH] fix: right click triggers contextmenu

---
 src/__tests__/click.js | 14 ++++++++++++++
 src/click.ts           | 14 +++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/click.js b/src/__tests__/click.js
index 8a0e784e..bdbf2bf2 100644
--- a/src/__tests__/click.js
+++ b/src/__tests__/click.js
@@ -459,3 +459,17 @@ test('move focus to closest focusable element', () => {
   userEvent.click(element.children[0])
   expect(element).toHaveFocus()
 })
+
+test('right click fires `contextmenu` instead of `click', () => {
+  const {element, getEvents, clearEventCalls} = setup(`<button/>`)
+
+  userEvent.click(element)
+  expect(getEvents('click')).toHaveLength(1)
+  expect(getEvents('contextmenu')).toHaveLength(0)
+
+  clearEventCalls()
+
+  userEvent.click(element, {buttons: 2})
+  expect(getEvents('contextmenu')).toHaveLength(1)
+  expect(getEvents('click')).toHaveLength(0)
+})
diff --git a/src/click.ts b/src/click.ts
index b54c1330..0f1cfcb1 100644
--- a/src/click.ts
+++ b/src/click.ts
@@ -38,7 +38,7 @@ function clickLabel(
   )
   fireEvent.pointerUp(label, init)
   fireEvent.mouseUp(label, getMouseEventOptions('mouseup', init, clickCount))
-  fireEvent.click(label, getMouseEventOptions('click', init, clickCount))
+  fireClick(label, getMouseEventOptions('click', init, clickCount))
   // clicking the label will trigger a click of the label.control
   // however, it will not focus the label.control so we have to do it
   // ourselves.
@@ -64,7 +64,7 @@ function clickBooleanElement(
       element,
       getMouseEventOptions('mouseup', init, clickCount),
     )
-    fireEvent.click(element, getMouseEventOptions('click', init, clickCount))
+    fireClick(element, getMouseEventOptions('click', init, clickCount))
   }
 }
 
@@ -95,7 +95,7 @@ function clickElement(
       element,
       getMouseEventOptions('mouseup', init, clickCount),
     )
-    fireEvent.click(element, getMouseEventOptions('click', init, clickCount))
+    fireClick(element, getMouseEventOptions('click', init, clickCount))
     const parentLabel = element.closest('label')
     if (parentLabel?.control) focus(parentLabel.control)
   }
@@ -133,6 +133,14 @@ function click(
   }
 }
 
+function fireClick(element: Element, mouseEventOptions: MouseEventInit) {
+  if (mouseEventOptions.button === 2) {
+    fireEvent.contextMenu(element, mouseEventOptions)
+  } else {
+    fireEvent.click(element, mouseEventOptions)
+  }
+}
+
 function dblClick(element: Element, init?: MouseEventInit) {
   hover(element, init)
   click(element, init, {skipHover: true, clickCount: 0})