Merge pull request ckeditor#2188 from ckeditor/t/2187

Autocomplete dropdown mouseover no longer throws an error

plugins/autocomplete/plugin.js

@@ -671,6 +671,16 @@
 				var target = evt.data.getTarget();
 
 				if ( this.element.contains( target ) ) {
+
+					// Find node containing data-id attribute inside target node tree (#2187).
+					target = target.getAscendant( function( element ) {
+						return element.hasAttribute( 'data-id' );
+					}, true );
+
+					if ( !target ) {
+						return;
+					}
+
 					var itemId = target.data( 'id' );
 
 					this.fire( 'change-selectedItemId', itemId );

tests/plugins/autocomplete/autocomplete.js

@@ -98,6 +98,35 @@
 			ac.destroy();
 		},
 
+		// (#2187)
+		'test mouseover finds correct target': function() {
+			var editor = this.editors.standard,
+				ac = new CKEDITOR.plugins.autocomplete( editor, {
+					dataCallback: dataCallback,
+					textTestCallback: textTestCallback,
+					itemTemplate: '<li data-id="{id}"><b>{name}</b></li>'
+				} );
+
+			this.editorBots.standard.setHtmlWithSelection( '' );
+
+			editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+			var firstElement = ac.view.getItemById( 1 );
+			assertViewOpened( ac, true );
+			assert.isTrue( firstElement.hasClass( 'cke_autocomplete_selected' ) );
+
+			var listItem = ac.view.element.getLast(),
+				target = listItem.findOne( 'b' );
+
+			ac.view.element.fire( 'mouseover', new CKEDITOR.dom.event( { target: target.$ } ) );
+
+			assertViewOpened( ac, true );
+			assert.isFalse( firstElement.hasClass( 'cke_autocomplete_selected' ) );
+			assert.isTrue( listItem.hasClass( 'cke_autocomplete_selected' ) );
+
+			ac.destroy();
+		},
+
 		// (#1984)
 		'test view is not opened after unmatch': function() {
 			var editor = this.editors.standard,

tests/plugins/autocomplete/manual/mouseover.html

@@ -0,0 +1,37 @@
+<div id="editor1" ></div>
+
+<script>
+
+	if ( autocompleteUtils.isUnsupportedEnvironment() || CKEDITOR.env.mobile ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.replace( 'editor1', {
+		width: 600,
+		on: {
+			instanceReady: function( evt ) {
+
+				// Default autocomplete instance.
+				new CKEDITOR.plugins.autocomplete( evt.editor, {
+					textTestCallback: autocompleteUtils.getTextTestCallback(),
+					dataCallback: autocompleteUtils.getDataCallback()
+				} );
+
+				var DATA = [
+					{ id: 1, name: '#john' },
+					{ id: 2, name: '#thomas' },
+					{ id: 3, name: '#anna' },
+					{ id: 4, name: '#cris' },
+					{ id: 5, name: '#julia' }
+				];
+
+				// Autocomplete instance with custom template.
+				new CKEDITOR.plugins.autocomplete( evt.editor, {
+					textTestCallback: autocompleteUtils.getTextTestCallback( { regex: '#\\w*$' } ),
+					dataCallback: autocompleteUtils.getDataCallback( { data: DATA } ),
+					itemTemplate: '<li data-id="{id}"><b>{name}</b></li>'
+				} );
+			}
+		}
+	} );
+</script>

tests/plugins/autocomplete/manual/mouseover.md

@@ -1,18 +1,24 @@
-@bender-tags: 4.10.0, bug, 2031
+@bender-tags: 4.10.0, bug, 2031, 2187
 @bender-ui: collapsed
-@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, autocomplete
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, autocomplete, textmatch
 @bender-include: _helpers/utils.js
 
+1. Open a console.
 1. Focus the editor.
-1. Type `@`.
+1. Type `@` character to open autocomplete with default template.
 1. Move mouse over the last dropdown item.
 1. Press enter.
+1. Repeat with `#` character to open autocomplete with custom template.
 
 
 ## Expected
 
-Selection changes when moving mouse over dropdown items. The last selected item is inserted on `enter` key.
+* No errors inside console.
+* Selection changes when moving mouse over dropdown items.
+* The last selected item is inserted on `enter` key.
 
 ## Unexpected
 
-First item is preselected regardless of mouse hover. The first item is inserted on `enter` key.
+* Any errors inside console.
+* First item is preselected regardless of mouse hover.
+* The first item is inserted on `enter` key.