Merge branch 'master' into fix-576

.all-contributorsrc

@@ -799,6 +799,15 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "geoffroymounier",
+      "name": "geoffroymounier",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24386870?v=4",
+      "profile": "https://github.com/geoffroymounier",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "commitConvention": "none",

README.md

@@ -765,6 +765,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/schoeneu"><img src="https://avatars.githubusercontent.com/u/3261341?v=4?s=100" width="100px;" alt=""/><br /><sub><b>schoeneu</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Aschoeneu" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/mkapal"><img src="https://avatars.githubusercontent.com/u/6420535?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Martin Kapal</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Amkapal" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://gr.linkedin.com/in/bastakis"><img src="https://avatars.githubusercontent.com/u/1146626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stavros</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Asstauross" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/geoffroymounier"><img src="https://avatars.githubusercontent.com/u/24386870?v=4?s=100" width="100px;" alt=""/><br /><sub><b>geoffroymounier</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Ageoffroymounier" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

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)
+})

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})