When dragging the header vertical line to resize the column, after the mouse is moved outside the browser windows, any mouse event (mousemove, mouserelease,…) is not captured. For example, I try to resize the last column to increase the width, I drag the vertical header line and move to the right, if my grid is close to the right border of the page, my mouse will be moved outside the browser window very soon. (Browser window is not full screen, so there is some space on the right). At this time, the mouse move/drag doesn’t make any effect on the width of the column I am resizing. [issue 1]. At this time, if I release the mouse and move the mouse back to the grid area, it still resizing the column as my mouse is moving as if I have never released the mouse [issue 2]. I have tried IE, Firefox and Chrome, all have the same problem.
Steps to reproduce:
- Resize the browser window to a smaller size so that there is some space between the right border of the browser window and right border of the screen.
- Go to the demo page: dhtmlx.com/docs/products/dhtmlxGrid/
- Drag any vertical line from the header to the right
- While dragging to the right, after the mouse passes over the right border of the browser window, the resizing stops (can tell by seeing the horizontal scrollbar) [issue 1]
- Release the mouse after passing the right of the browser window.
- Move the mouse back to the grid header, the resizing still happening. [issue 2] (resizing should not happen due to the mouse was already released)
Note that it is easier to reproduce if the grid is located at the right of the browser window and the browser window is not full screen that there is some space between the right border of the browser window and right border of the screen. OR if user has dual monitor and the browser is at the left monitor and dragging the mouse to the right monitor.
Please take a look this issue. Hopefully, there is anything we can do to fix this or improve this.