react-rnd icon indicating copy to clipboard operation
react-rnd copied to clipboard

BUG Drag improperly started on scroll or click w/modifier

Open twall opened this issue 3 years ago • 1 comments

Overview of the problem

Drags are initiated by clicks in a content scroll thumb or on a click w/keyboard modifier.

I'm using react-rnd version 10.3.5

My browser is Chrome, Safari.

I am sure this issue is not a duplicate.

Description

The component should not start dragging in the following conditions (by default)

  • Scrolling primary content via scroll bar. A click on the scroll thumb will cause the window to be repositioned once the button is released.
  • Dragging should only be triggered by button 1 with no key modifiers. Right-click on OS X may be effected by holding the control key with button 1; this should not trigger a drag, but does.

Steps to Reproduce

a) Use content bigger than the rnd component so that a scrollbar is present. Scroll by clicking and dragging on the scroll thumb. When the button is released, the rnd component jumps position. b) Hold down the control key and click on the component. On OS X, this brings up a context menu, select "Inspect Element". When the mouse/focus returns to the rnd window/view, the rnd component is still tracking an active drag.

Expected behavior

A click on a scrollbar thumb should not initiate a drag. A click with a keyboard modifier should not initiate a drag.

Actual behavior

A click on a scrollbar thumb initiates a drag, with the rnd component jumping when the button is released. A click with a keyboard modifier initiates a drag, with drag behavior varying depending on whether focus is changed.

twall avatar Jun 06 '22 15:06 twall

I think this is related to: https://github.com/bokuweb/react-rnd/issues/712 Removing 'bounds' property works, but bounds is usually needed. Suggested fixes there may work but only on windows and it's not so maintainable if you have different components with different scroll bars.

SantiMe1 avatar Aug 09 '22 06:08 SantiMe1