calebpitan / contextmenu Goto Github PK

MouseEvent.clientX / TouchEvent.[...].clientX doesn't give accurate coordinates with grid layout: this makes positioning faulty.

When working with grid layout, MouseEvent.clientX/TouchEvent.touches[n].clientX or MouseEvent.clientX/TouchEvent.targetTouches[n].clientX or MouseEvent.clientX/TouchEvent.changedTouches[n].clientX give coordinates relative to Window or client, meanwhile Event.currentTarget.offsetLeft is relative to the column of the gridded element that forms the grid layout, while that element is being literally absolute (not css absolute) having a offsetLeft GridLayout.offsetLeft of zero 0.

More concisely, suppose we have a 3 column grid layout, say:

| COLUMN 1 |    COLUMN 2    | COLUMN 3 |

Assume a mousedown event was triggered on COLUMN 3, COLUMN3.offsetLeft will always equal 0—not relative to window—in fact all the columns offsetLeft equals 0. While either MouseEvent.clientX/... will always be relative to window, say, is equal 894 while window.innerWidth = 1024.

This affects positioning when using the contextmenu in a grid layout, as CSS left position property is similar to the offsetLeft of the element.

To Reproduce
Steps to reproduce the behavior:

1. Create at least a three column grid layout, for better result.
2. In the third column, have a contextmenu element relative to the third column or one of its descendants by making the contextmenu element absolute and the parent container relative; rather than having the contextmenu element relative to window.
3. Use the contextmenu library to activate a contextmenu on the elements, one that creates the contextmenu event and one that responds to the contextmenu event like src, dest as named in the examples.
4. Try triggering a contextmenu event on the src element and check the positioning of the dest element from its CSS top, right, bottom, left properties.

Expected behavior
The CSS left property should be relative to window instead of the original elemnt it was defined as being relative to in the CSS declaration. This is the bug.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 79