Merge pull request #4122 from ckeditor/t/4107

Fix autocomplete navigation with multiple instances.

CHANGES.md

@@ -6,6 +6,7 @@ CKEditor 4 Changelog
 Fixed Issues:
 
 * [#3795](https://github.com/ckeditor/ckeditor4/issues/3795): Fixed: Setting [`dataIndentationChars`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-dataIndentationChars) config option to an empty string is ignored and replaced by a tab (`\t`) character. Thanks to [Thomas Grinderslev](https://github.com/Znegl)!
+* [#4107](https://github.com/ckeditor/ckeditor4/issues/4107): Fixed: Multiple [Autocomplete](https://ckeditor.com/cke4/addon/autocomplete) instances cause keyboard navigation issues.
 
 ## CKEditor 4.14.1
 

plugins/autocomplete/plugin.js

@@ -298,7 +298,12 @@
 				this.registerPanelNavigation();
 			}
 
-			editor.on( 'contentDom', this.registerPanelNavigation, this );
+			// Note: CKEditor's event system has a limitation that one function
+			// cannot be used as listener for the same event more than once. Hence, wrapper function.
+			// (#4107)
+			editor.on( 'contentDom', function() {
+				this.registerPanelNavigation();
+			}, this );
 		},
 
 		registerPanelNavigation: function() {

tests/plugins/autocomplete/autocomplete.js

@@ -162,26 +162,33 @@
 			wait();
 		},
 
-		// (#3938)
+		// (#3938, #4107)
 		'test navigation keybindings are registered after changing mode': function() {
 			var editor = this.editors.source,
-				ac = new CKEDITOR.plugins.autocomplete( editor, configDefinition );
+				bot = this.editorBots.standard,
+				ac1 = new CKEDITOR.plugins.autocomplete( editor, configDefinition ),
+				ac2 = new CKEDITOR.plugins.autocomplete( editor, configDefinition );
 
 			editor.setMode( 'source', function() {
 				editor.setMode( 'wysiwyg', function() {
 					resume( function() {
-						var spy = sinon.spy( ac, 'onKeyDown' );
+						testPanelEvents( ac1, 'The first autocomplete navigation bindings should work' );
+						testPanelEvents( ac2, 'The second autocomplete navigation bindings should work' );
+					} );
+				} );
+			} );
 
-						this.editorBots.standard.setHtmlWithSelection( '' );
+			function testPanelEvents( autocomplete, msg ) {
+				var spy = sinon.spy( autocomplete, 'onKeyDown' );
 
-						editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {} ) );
+				bot.setHtmlWithSelection( '' );
 
-						spy.restore();
+				editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {} ) );
 
-						assert.isTrue( spy.called );
-					} );
-				} );
-			} );
+				spy.restore();
+
+				assert.isTrue( spy.called, msg );
+			}
 
 			wait();
 		},

tests/plugins/autocomplete/manual/sourcemode.html

@@ -0,0 +1,29 @@
+<textarea id="editor"></textarea>
+
+<script>
+	var feed = [
+		'john',
+		'thomas',
+		'anna',
+		'annabelle',
+		'cris',
+		'julia'
+	];
+
+	var editor = CKEDITOR.replace( 'editor', {
+		width: 600,
+		mentions: [
+			{
+				feed: feed,
+				minChars: 0
+			},
+			{
+				feed: feed,
+				minChars: 0,
+				marker: '#'
+			}
+		]
+	} );
+
+	bender.tools.ignoreUnsupportedEnvironment( 'mentions', editor );
+</script>

tests/plugins/autocomplete/manual/sourcemode.md

@@ -0,0 +1,19 @@
+@bender-tags: 4.14.2, bug, 4107
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, mentions, sourcearea
+
+1. Toggle source mode.
+1. Focus the editor.
+1. Type `@` to open completion panel.
+1. Navigate through items using arrow keys.
+1. Close completion panel using `esc` key.
+1. Type `#` to open completion panel.
+1. Navigate through items using arrow keys.
+
+## Expected
+
+For both completion panels under `@` and `#` characters, you should be able to navigate through items using arrow keys.
+
+## Unexpected
+
+Navigation keys doesn't work for both or one of completion panels after toggling source mode.