fix(pointer): trigger contextmenu on mousedown (#811)

* test: remove todo * fix(pointer): trigger `contextmenu` on `mousedown`
testing-library · Dec 13, 2021 · e1c4cad · e1c4cad
1 parent 1bc5945
commit e1c4cad
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 26 deletions.
diff --git a/src/pointer/pointerPress.ts b/src/pointer/pointerPress.ts
@@ -1,6 +1,5 @@
 /* eslint-disable complexity */
 
-import {fireEvent} from '@testing-library/dom'
 import {
   findClosest,
   firePointerEvent,
@@ -134,6 +133,10 @@ function down(
     })
   }
 
+  if (pointerType === 'mouse' && button === 'secondary') {
+    fire('contextmenu')
+  }
+
   return pressObj
 
   function fire(type: string) {
@@ -231,10 +234,6 @@ function up(
           )
         }
       }
-
-      if (pointerType === 'mouse' && button === 'secondary') {
-        fireEvent.contextMenu(target)
-      }
     }
   }
 

diff --git a/src/utils/pointer/firePointerEvents.ts b/src/utils/pointer/firePointerEvents.ts
@@ -41,17 +41,15 @@ export function firePointerEvent(
   if (['pointerdown', 'pointerup'].includes(type)) {
     init.isPrimary = isPrimary
   }
+  init.button = getMouseButton(button ?? 0)
+  init.buttons = getMouseButtons(
+    ...pointerState.pressed
+      .filter(p => p.keyDef.pointerType === pointerType)
+      .map(p => p.keyDef.button ?? 0),
+  )
   if (
-    ['mousedown', 'mouseup', 'pointerdown', 'pointerup', 'click'].includes(type)
+    ['mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu'].includes(type)
   ) {
-    init.button = getMouseButton(button ?? 0)
-    init.buttons = getMouseButtons(
-      ...pointerState.pressed
-        .filter(p => p.keyDef.pointerType === pointerType)
-        .map(p => p.keyDef.button ?? 0),
-    )
-  }
-  if (['mousedown', 'mouseup', 'click', 'dblclick'].includes(type)) {
     init.detail = clickCount
   }
 

diff --git a/tests/pointer/click.ts b/tests/pointer/click.ts
@@ -15,6 +15,18 @@ test('click element', async () => {
   expect(getEvents('click')).toHaveLength(1)
 })
 
+test('secondary button triggers contextmenu', async () => {
+  const {element, getClickEventsSnapshot, getEvents} = setup('<div />')
+  await userEvent.pointer({keys: '[MouseRight>]', target: element})
+
+  expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
+    pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
+    mousedown - button=2; buttons=2; detail=1
+    contextmenu - button=2; buttons=2; detail=1
+  `)
+  expect(getEvents('contextmenu')).toHaveLength(1)
+})
+
 test('double click', async () => {
   const {element, getClickEventsSnapshot, getEvents} = setup(`<div></div>`)
 
@@ -74,7 +86,7 @@ test('two clicks', async () => {
 })
 
 test('other keys reset click counter, but keyup/click still uses the old count', async () => {
-  const {element, getClickEventsSnapshot} = setup(`<div></div>`)
+  const {element, getClickEventsSnapshot, getEvents} = setup(`<div></div>`)
 
   await userEvent.pointer({
     keys: '[MouseLeft][MouseLeft>][MouseRight][MouseLeft]',
@@ -90,8 +102,8 @@ test('other keys reset click counter, but keyup/click still uses the old count',
     pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
     mousedown - button=0; buttons=1; detail=2
     mousedown - button=2; buttons=3; detail=1
+    contextmenu - button=2; buttons=3; detail=1
     mouseup - button=2; buttons=1; detail=1
-    contextmenu - button=0; buttons=0; detail=0
     pointerup - pointerId=1; pointerType=mouse; isPrimary=true
     mouseup - button=0; buttons=0; detail=2
     click - button=0; buttons=0; detail=2
@@ -103,15 +115,8 @@ test('other keys reset click counter, but keyup/click still uses the old count',
     click - button=0; buttons=0; detail=1
   `)
 
-  // TODO: no click events after other button
-  // TODO: no multiple pointerdown events while another button is still pressed
-  // expect(getEvents('dblclick')).toHaveLength(0)
-  // expect(getEvents('click')).toHaveLength(1)
-  //   expect(getEvents('mousedown')).toHaveLength(3)
-  //   expect(getEvents('mousedown')[1]).toHaveProperty('detail', 2)
-  //   expect(getEvents('mousedown')[3]).toHaveProperty('detail', 1)
-  //   expect(getEvents('mouseup')).toHaveLength(3)
-  //   expect(getEvents('mouseup')[1]).toHaveProperty('detail', 2)
+  expect(getEvents('mouseup')[2]).toHaveProperty('detail', 2)
+  expect(getEvents('mousedown')[3]).toHaveProperty('detail', 1)
 })
 
 test('click per touch device', async () => {

diff --git a/tests/pointer/drag.ts b/tests/pointer/drag.ts
@@ -14,7 +14,7 @@ test('drag sequence', async () => {
     pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
     mousedown - button=0; buttons=1; detail=1
     pointermove - pointerId=1; pointerType=mouse; isPrimary=undefined
-    mousemove - button=0; buttons=0; detail=0
+    mousemove - button=0; buttons=1; detail=0
     pointerup - pointerId=1; pointerType=mouse; isPrimary=true
     mouseup - button=0; buttons=0; detail=1
     click - button=0; buttons=0; detail=1