Skip to content

Click and DoubleClick not fired if pointerDown has preventDefault #1119

@snowystinger

Description

@snowystinger

Reproduction example

https://codesandbox.io/s/aged-voice-xjf3dw

Prerequisites

  1. Click the box with your mouse
  2. Look in the console at the events that were fired
  3. Compare to the console when running the test with user.click

Expected behavior

Both should fire

pointerDown
pointerUp
click

Actual behavior

The test does not fire click

I'll provide more in additional context because the codesandbox behaves a little differently than when I run this repos tests with two tests I think cover the behavior

User-event version

14.4.3

Environment

Testing Library framework: @testing-library/[email protected]

JS framework: [email protected]

Test environment: [email protected]

DOM implementation: [email protected]

Additional context

I think these are the behaviors that would be expected, assuming I wrote them correctly.
In english:
calling user.click with preventDefault on pointerDown should result in pointerDown, pointerUp, and click being fired
calling user.pointer with preventDefault on pointerDown should also result in pointerDown, pointerUp, and click being fired

test('preventDefault on pointer down prevents compatibility events works with click', async () => {
  const {element, getClickEventsSnapshot, getEvents, user} = setup('<div />', {eventHandlers: {pointerdown: e => e.preventDefault()}})
  await user.click(element)

  expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
    pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
    pointerup - pointerId=1; pointerType=mouse; isPrimary=true
    click - button=0; buttons=0; detail=1
  `)
  expect(getEvents('click')).toHaveLength(1)
})

test('preventDefault on pointer down prevents compatibility events works with pointer', async () => {
  const {element, getClickEventsSnapshot, getEvents, user} = setup('<div />', {eventHandlers: {pointerdown: e => e.preventDefault()}})
  await user.pointer({keys: '[MouseLeft]', target: element})

  expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
    pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
    pointerup - pointerId=1; pointerType=mouse; isPrimary=true
    click - button=0; buttons=0; detail=1
  `)
  expect(getEvents('click')).toHaveLength(1)
})

I think this is handled here https://github.com/testing-library/user-event/blob/main/src/system/pointer/index.ts#L105 but I've checked and isPrevented is true. So I'm not sure why the mouse events are getting fired.

It looks like including a 'click' is part of system/pointer/mouse. So guessing that would need to be pulled up and out of there.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingreleased

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions