bug - dragging activating when using file element outside of draggable div, despite disabled being set to true dynamically in the draggable div

[javismiles]

I have a div that contains an input element of type file:

I trigger a click event on that "addimg" input element to allow the user to load an image from device.

The "addimg" input element is located outside a draggable large div, like this:

<Draggable onDrag={handleDrag} {...activeDrag} {...dragHandlers} >...</Draggable>

<div><input id="addImg" type="file" onChange={onFileChange} /></div>

So the input element is outside the draggable large div

the problem is that when addImg is triggered, and the devices's dialogue opens to load an image, whatever you do, load or not load an image, when returning from that dialogue, the large div begins to drag automatically

Even setting its disable to true programmatically at the beginning of the click trigger event doesnt help, it just comes alive when returning from the load file dialogue of the OS

how can I prevent this, as it interferes completely with the functionality I need thank you :)

[javismiles]

interestingly:

• if i set draggable div with disabled:true from the beginning, then of course the problem doesnt happen, but I cannot drag the div either
• if at the beginning the draggable div has disabled:false, and when user double clicks on background, I set disabled:true in draggable div right before I trigger the click event on input element, the problem happens! it is as if there was something in the actual device file select dialogue that brings to life the dragging behaviour despite me setting disabled to true right before the dialogue opens

[javismiles]

I have verified that I am switching disabled to true right through the process before and during the file dialog and yet the draggable component still becomes draggable somehow

[javismiles]

Important update: the problem happens when triggering a click on the input file element: document.getElementById('addImg').click()

If i click directly on the input file element, the problem doesnt happen, the large div doesnt become draggable

Somehow it is the use of the remote dynamic triggering with document.getElementById('addImg').click() in combination with an input file element that creates the problem

The thing is that I need to activate it remotely programmatically in my app

[javismiles]

I have just verified that the "drag" event is indeed activated in the draggable component when triggering dynamically programmatically an input file element that is totally unrelated to the draggable scope, seems like a bug to me

[javismiles]

the problem also happens with mouse events, not with touch events, somehow with the mouse after returning from the input file dialog, the dragging event just keeps firing

[javismiles]

cant manage to prevent it, somehow entering into the file type dialog makes the draggable component believe that the signal to start dragging has been given

[imhuynq]

For anyone get this bug, you should stop event propagation when click the element stackoverflow