Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click and DoubleClick not fired if pointerDown has preventDefault #1119

Open
snowystinger opened this issue Apr 20, 2023 · 3 comments · May be fixed by #1121
Open

Click and DoubleClick not fired if pointerDown has preventDefault #1119

snowystinger opened this issue Apr 20, 2023 · 3 comments · May be fixed by #1121
Labels
bug Something isn't working

Comments

@snowystinger
Copy link

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/react@13.4.0

JS framework: react@18.2.0

Test environment: jest@28.1.3

DOM implementation: jsdom@20.0.3

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.

@snowystinger snowystinger added bug Something isn't working needs assessment This needs to be looked at by a team member labels Apr 20, 2023
@snowystinger snowystinger changed the title Click compatibility events cannot be prevented Click and DoubleClick not fired if pointerDown has preventDefault Apr 25, 2023
@snowystinger
Copy link
Author

here's a test for double click as well

test('double click', async () => {
  const {element, getClickEventsSnapshot, getEvents, user} =
    setup(`<div></div>`, {eventHandlers: {pointerdown: e => e.preventDefault()}});

  await user.pointer({keys: '[MouseLeft][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
    pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
    pointerup - pointerId=1; pointerType=mouse; isPrimary=true
    click - button=0; buttons=0; detail=2
    dblclick - button=0; buttons=0; detail=2
  `)

  expect(getEvents('dblclick')).toHaveLength(1)
  expect(getEvents('click')).toHaveLength(2)

  // detail reflects the click count
  expect(getEvents('dblclick')[0]).toHaveProperty('detail', 2)
})

@snowystinger snowystinger linked a pull request Apr 25, 2023 that will close this issue
3 tasks
@ph-fritsche ph-fritsche removed the needs assessment This needs to be looked at by a team member label May 11, 2023
@istateside
Copy link

I just ran into this bug as well - any way we can get a review of @snowystinger 's PR prioritized sometime soon? Looks like the PR and this issue's been open for a bit without eyes on it 😞

@snowystinger
Copy link
Author

just a friendly bump, is there anything you need in order to consider this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants