Merge pull request #235 from ckeditor/t/228

Fix: Clicking and dragging in a drop-down panel should not break the selection. Closes #228.

src/dropdown/dropdownpanelview.js

@@ -51,7 +51,13 @@ export default class DropdownPanelView extends View {
 				]
 			},
 
-			children: this.children
+			children: this.children,
+
+			on: {
+				// Drag and drop in the panel should not break the selection in the editor.
+				// https://github.com/ckeditor/ckeditor5-ui/issues/228
+				selectstart: bind.to( evt => evt.preventDefault() )
+			}
 		} );
 	}
 }

tests/dropdown/dropdownpanelview.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global Event */
+
 import ViewCollection from '../../src/viewcollection';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 
@@ -45,6 +47,19 @@ describe( 'DropdownPanelView', () => {
 					expect( view.element.classList.contains( 'ck-dropdown__panel-visible' ) ).to.be.false;
 				} );
 			} );
+
+			describe( 'listeners', () => {
+				describe( 'selectstart', () => {
+					// https://github.com/ckeditor/ckeditor5-ui/issues/228
+					it( 'gets preventDefault called', () => {
+						const event = new Event( 'selectstart' );
+						const spy = sinon.spy( event, 'preventDefault' );
+
+						view.element.dispatchEvent( event );
+						sinon.assert.calledOnce( spy );
+					} );
+				} );
+			} );
 		} );
 	} );
 } );

tests/manual/tickets/228/1.html

@@ -0,0 +1,23 @@
+<h2>Drag and drop in the DropdownPanelView</h2>
+
+<div id="editor">
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at feugiat justo. Aenean vulputate ligula quis lectus dictum semper. Vestibulum lacinia scelerisque porta. Maecenas id maximus ante, nec sollicitudin massa. Praesent nulla purus, pharetra non elit et, tincidunt convallis nibh. Curabitur commodo lacus ut turpis faucibus pellentesque. Aliquam pellentesque odio sed tellus rhoncus, vitae sodales dolor pretium.
+		Donec porta semper rhoncus. Nam sodales nulla aliquam magna aliquet rutrum. Aliquam vestibulum diam dignissim dui sollicitudin, id condimentum eros ullamcorper. Phasellus id vestibulum neque, vel imperdiet ligula. Donec ornare eu quam id facilisis. Curabitur molestie eleifend rutrum. Sed scelerisque justo et leo molestie, in pharetra tellus aliquet. Cras justo elit, feugiat ac interdum et, mattis at ante. Praesent posuere ornare convallis. Nam commodo aliquet lacus quis aliquam. Vivamus in metus enim. Aliquam blandit tempus lectus eget scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+	</p>
+
+	<p>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+		<b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b> <b>Select me!</b>
+	</p>
+
+	<p>
+		Donec et ipsum tellus. Donec leo turpis, sollicitudin vel mauris ac, suscipit congue augue. In id dapibus purus. Etiam in vestibulum purus. Vestibulum maximus maximus purus, ut mollis libero rhoncus sit amet. Etiam faucibus posuere nisl nec malesuada. Ut est sem, mollis non diam sit amet, tristique mollis urna. Donec consectetur eros ipsum, non tristique odio maximus non. Curabitur vel lorem eu libero porta lacinia id id leo. Aenean vitae orci sed sapien tempor feugiat id eu diam. Curabitur egestas tincidunt orci non imperdiet. Aliquam auctor varius facilisis. Vivamus pharetra purus vitae eros placerat lacinia.
+
+		Fusce ex ipsum, ultricies porttitor auctor in, porta commodo mi. Nulla vitae luctus erat. Suspendisse at feugiat odio. Integer varius tincidunt sagittis. Curabitur varius porttitor dapibus. Vivamus posuere hendrerit magna nec fermentum. Praesent facilisis ante sed dolor consectetur egestas. Sed sit amet leo ornare odio tempor luctus. Fusce lobortis eleifend bibendum. Fusce gravida gravida lacus, sed congue risus pretium sed. Praesent a gravida magna. Proin non odio sit amet turpis egestas posuere. Sed rutrum orci non felis interdum semper.
+	</p>
+</div>

tests/manual/tickets/228/1.js

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, console:false */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'headings' ],
+} )
+.catch( err => console.error( err.stack ) );

tests/manual/tickets/228/1.md

@@ -0,0 +1,11 @@
+# Issue [#228](https://github.com/ckeditor/ckeditor5-ui/issues/228) manual test.
+
+## Drag and drop in the dropdown panel should not affect the selection
+
+1. Select the bold text in the editor content.
+2. Click to open the dropdown in the toolbar.
+3. Try to drag and drop the text **within** the dropdown panel.
+
+**Expected**: The selection should remain untouched as long as drag and dropping within the panel's boundary.
+
+