[DnD] Drop on certain UI elements reloads the page

[Olek Nowodziński]

Dialogs

1. Use ​http://tests.ckeditor.dev:10450/tests/plugins/uploadwidget/manual/droponnotallowedparts
2. Open a dialog.
3. Drop an image: on a dialog, dialog cover etc.

Expected: No action.

Actual: Page reload. The image is displayed by the browser.

---

Notifications

1. Use ​http://tests.ckeditor.dev:10450/tests/plugins/uploadwidget/manual/droponnotallowedparts
2. Drop some image.
3. While the image is uploading, drop another on progress bar.

Expected: No action.

Actual: Page reload. The image is displayed by the browser.

---

Scrollbars

1. Use ​http://tests.ckeditor.dev:10450/tests/plugins/uploadwidget/manual/droponnotallowedparts
2. Create a long content, so the vertical scrollbar is visible.
3. Drop an image on the scrollbar.

Expected: No action.

Actual: Page reload. The image is displayed by the browser.

[Jakub Ś]

Reproducible in every browser.

[Tade0]

I have one obvious solution to this pushed to ​branch:t/13184, although it doesn't work properly on IE, because for some reason dropping an image on the dialog title still results in a page reload.

Interestingly, attaching a listener that uses preventDefault() to the title did not solve this issue. Any suggestions why might this be happening?

[Tade0]

Apparently attaching the listeners to the body parent solves this problem.

Changes pushed to ​branch:t/13184a.

[Tade0]

Inspired by this commit: ​https://github.com/ckeditor/ckeditor-dev/commit/5394b5b I modified my solution to be consistent with what was done there.

Changes pushed to ​branch:t/13184b

[Olek Nowodziński]

Still able to reproduce "Notifications" case. Checked in latest Chrome.

[Tade0]

Applied the same changes as previously, but this time to the notification DOM element.

Rebased to master, added tests. Changes pushed to ​branch:t/13184b.

[Olek Nowodziński]

Together with p.jasiun, we decided that it's time to clean up the code. Since we're unable predict the number of future use cases and the code is already redundant:

1. Please implement CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( element ) that would correspond with

   function preventDefaultSetDropEffectToNone( evt ) {
   	evt.data.preventDefault();
   	evt.data.$.dataTransfer.dropEffect = 'none';
   }
   
   element.on( 'dragover', preventDefaultSetDropEffectToNone );
   

2. Use CKEDITOR.plugins.clipboard.preventDefaultDropOnElement to replace existing implementations (clipboard, notification, dialog).
3. Write documentation for the method and automated tests (if possible). Some ideas in ​https://github.com/ckeditor/ckeditor-dev/commit/cb5fd3a#diff-1a20173088d59723c5efce3532752b2fR963 (didn't check that). Don't worry If not applicable because we still have manual tests for the feature.

BTW: I think I'm still able to drop on editor's scrollbar and reload the page. It could be OS–specific though.

Thanks!

[Tade0]

On what OS does this happen?

I added a generic unit test that just checks whether on dragover preventDefault was called and dropEffet was set to 'none'.

Changes pushed to ​branch:t/13184c.

[Olek Nowodziński]

Pushed some fixes and refactored tests.

[Olek Nowodziński]

Merged ​git:20cc11b into master.