Drag & Drop : Dragging selects text and image when mouse moves in chrome browser

[Happy5]

Ext JS : ver 6.2.1.167 theme-classic
Browser : Chrome 56.0.2924.76
Browser : Chrome 55.0.288387
OS : Window 10 (64bit)


In ExtJS 6.2.0 and ExtJS 6.2.1 while dragging an item from grid-panel or tree-panel (from drag-zone) the text around web page gets highlighted/selected. Also when something dragged from image the Drag does not work as expected. If text gets selected around web page on first time dragging then second time dragging does not work. It drags the selected text/images instead of dragging Ext JS component.


NOTE :
1. Drag & Drop was working fine in ExtJS 6.0.0
2. This unexpected behaviour is only observed in Chrome Browser


Any Help or Fix will be appreciated.

[Kevin Jackson]

Hi ,

Please provide a test case demonstrating the problem so we can arrive at a solution for you.

Ideally, a test case would be:

1. A simple example using the minimal amount of code that shows an issue in a Sencha product.
2. Locally runnable
3. Reproducible
4. Isolated from third party products
5. Without requirements to access any remote resources
6. All data needed available to be loaded locally (using a JSON or XML flat file)
7. Preferably at fiddle.

If your issue is specific to a browser or OS, please note that. Screen caps and Screencasts created by products like Jing may also be very helpful in tracking down any issues

Thanks!

Kevin Jackson
Sencha Support Team

[Jesfery]

Hi,

We've been experiencing a similar issue since upgrading to ext-6.2.1. I've created a fiddle below that should demonstrate the issue.



You should see that the text in the textfield is selected when you drag a node from the top view to the bottom one while using Chrome. Also, if you switch to ext-6.0.2 you wont be able to replicate the problem.

Thanks

[Kevin Jackson]

Thanks for the clarification and the fiddle


Kevin Jackson
Sencha Support Team

[Kevin Jackson]

Thanks for the report! I have opened a bug in our bug tracker.

[Happy5]

Thanks for the report! I have opened a bug in our bug tracker.

Any progress on the issue so far ?

Some workaround or quick fix will be appreciated.

[Kevin Jackson]

Once it goes to Engineering, it's out of our hands. It will be updated in the link above if there is a solution. I reported a similar issue today which also helps in identifying and addressing the issue.


Kevin Jackson
Sencha Support Team

[Psychokrameur]

Hello @Happy5,

Did you found any workaround?

Thanks in advance

[aholdener]

I believe I found out what is causing this, or at least I fixed the problem I was having with drag and drop highlighting. The only difference with my issue is that I noticed it happening in Firefox and IE 9+ as well. From what I can tell, the problem came from a small change that was made in the stopEvent function in the Ext.dd.DragDropManager class. This is what the function looks like as of ExtJS 6.0.2.981, which is where I believe is where the problem was introduced, or at least the first version I found that had this bug.

stopEvent: function(e) {
    if (this.stopPropagation) {
        e.stopPropagation();
    }
    if (this.preventDefault && e.pointerType === 'touch') {
        e.preventDefault();
    }
}

I've found that by removing

 && e.pointerType === 'touch'

from the second 'if' statement (via an override function) stops highlighting from happening with the drag and drop plugin. Let me know if this doesn't work for you or if it causes other problems because I haven't extensively tested it, but it seems to be working.

[Psychokrameur]

Thanks a lot for the temporary workaround aholdener !