Draggable doesn't recognize MouseEvent and dont work with Playwright

Open
#737 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, playwright, typescript
Domain
frontend, testing-qa, web-dev

Research direction

Reproduce the issue with the two event-dispatch approaches and Playwright's page.mouse sequence described in the report. Trace Draggable's mouse-event handling to identify why a MouseEvent behaves differently, then verify that the supported approach works without TestUtils and that the Playwright drag sequence completes successfully.

Written by the indexing model from the issue text.

Description

For E2E we have to simulate DnD, and code

const triggerMouseEvent = (node: HTMLElement, eventType: string, data: { clientX: number; clientY: number }) => {
       const evt = new MouseEvent(eventType, data);
       node.dispatchEvent(evt);
};

triggerMouseEvent('mousedown', {clientX: 0, clientY: 0 });
triggerMouseEvent('mousemove', {clientX: 50, clientY: 0 });
triggerMouseEvent('mouseup', {clientX: 50, clientY: 0 });

Don't work, but

const triggerMouseEvent = (node: HTMLElement, eventType: string, data: { clientX: number; clientY: number }) => {
    const evt = document.createEvent('MouseEvents');

    evt.initMouseEvent(
        eventType,
        true,
        true,
        window,
        0,
        data.clientX,
        data.clientY,
        data.clientX,
        data.clientY,
        false,
        false,
        false,
        false,
        0,
        null,
    );

    node.dispatchEvent(evt);
};

triggerMouseEvent('mousedown', {clientX: 0, clientY: 0 });
triggerMouseEvent('mousemove', {clientX: 50, clientY: 0 });
triggerMouseEvent('mouseup', {clientX: 50, clientY: 0 });

Seem to be works fine!
PS: I can't use TestUtils, because code above injected to the document via Playwright, and it should be 'clearable', without dependency links.

But! initMouseEvent is deprecated... and wanna have more actual solution

PS: The better if would work default playwright D'n'D code like

await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + deltaX, y + deltaY);
await page.mouse.up();
Dominant language
JavaScript
Stars
9.3k
Forks
1k
Avg merge
3d 8h
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-grid-layout/react-draggable

All issues in react-grid-layout/react-draggable

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.