fix(click): right click triggers contextmenu (#601)

testing-library · Mar 19, 2021 · 16847e1 · 16847e1
1 parent 2ef89dd
commit 16847e1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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})