Merge pull request #3957 from ckeditor/t/3938

Fix issue with loosing keybindings for autocomplete panel with sourcemode

CHANGES.md

@@ -8,6 +8,7 @@ Fixed Issues:
 * [#2607](https://github.com/ckeditor/ckeditor4/issues/2607): Fixed: [Emoji](https://ckeditor.com/cke4/addon/emoji) SVG icons file is not loaded in CORS context.
 * [#3866](https://github.com/ckeditor/ckeditor4/issues/3866): Fixed: [`config.readOnly`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-readOnly) config variable not considered for startup read-only mode of inline editor.
 * [#3931](https://github.com/ckeditor/ckeditor4/issues/3931): [IE] Fixed: Error is thrown when pasting using paste button after accepting browser Clipboard Access Prompt dialog.
+* [#3938](https://github.com/ckeditor/ckeditor4/issues/3938): Fixed: Cannot navigate autocomplete panel via keyboard after switching to source mode.
 
 ## CKEditor 4.14
 

plugins/autocomplete/plugin.js

@@ -288,26 +288,28 @@
 				this.viewRepositionListener();
 			}, this ) );
 
-			this._listeners.push( editor.on( 'contentDom', onContentDom, this ) );
-
 			// Don't let browser to focus dropdown element (#2107).
 			this._listeners.push( this.view.element.on( 'mousedown', function( e ) {
 				e.data.preventDefault();
 			}, null, null, 9999 ) );
 
-			// Attach if editor is already initialized.
+			// Register keybindings if editor is already initialized.
 			if ( editable ) {
-				onContentDom.call( this );
+				this.registerPanelNavigation();
 			}
 
-			function onContentDom() {
-				// Priority 5 to get before the enterkey.
-				// Note: CKEditor's event system has a limitation that one function (in this case this.onKeyDown)
-				// cannot be used as listener for the same event more than once. Hence, wrapper function.
-				this._listeners.push( editable.on( 'keydown', function( evt ) {
-					this.onKeyDown( evt );
-				}, this, null, 5 ) );
-			}
+			editor.on( 'contentDom', this.registerPanelNavigation, this );
+		},
+
+		registerPanelNavigation: function() {
+			var editable = this.editor.editable();
+
+			// Priority 5 to get before the enterkey.
+			// Note: CKEditor's event system has a limitation that one function (in this case this.onKeyDown)
+			// cannot be used as listener for the same event more than once. Hence, wrapper function.
+			this._listeners.push( editable.attachListener( editable, 'keydown', function( evt ) {
+				this.onKeyDown( evt );
+			}, this, null, 5 ) );
 		},
 
 		/**

tests/plugins/autocomplete/autocomplete.js

@@ -1,5 +1,5 @@
 /* bender-tags: editor */
-/* bender-ckeditor-plugins: autocomplete,wysiwygarea */
+/* bender-ckeditor-plugins: autocomplete,wysiwygarea,sourcearea */
 
 ( function() {
 	'use strict';
@@ -11,6 +11,11 @@
 				removePlugins: 'tab'
 			}
 		},
+		source: {
+			config: {
+				removePlugins: 'tab'
+			}
+		},
 		arrayKeystrokes: {
 			config: {
 				autocomplete_commitKeystrokes: [ 16 ], // SHIFT
@@ -157,6 +162,30 @@
 			wait();
 		},
 
+		// (#3938)
+		'test navigation keybindings are registered after changing mode': function() {
+			var editor = this.editors.source,
+				ac = new CKEDITOR.plugins.autocomplete( editor, configDefinition );
+
+			editor.setMode( 'source', function() {
+				editor.setMode( 'wysiwyg', function() {
+					resume( function() {
+						var spy = sinon.spy( ac, 'onKeyDown' );
+
+						this.editorBots.standard.setHtmlWithSelection( '' );
+
+						editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {} ) );
+
+						spy.restore();
+
+						assert.isTrue( spy.called );
+					} );
+				} );
+			} );
+
+			wait();
+		},
+
 		'test arrow down selects next item': function() {
 			var editor = this.editors.standard,
 				editable = editor.editable(),

tests/plugins/autocomplete/manual/navigation.md

@@ -0,0 +1,13 @@
+@bender-tags: 4.14.1, bug, 3938
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, autocomplete, textmatch, sourcearea
+@bender-include: _helpers/utils.js
+
+1. Focus the editor.
+1. Type `@`.
+1. Navigate to the latest completion item using arrow keys.
+
+  **Expected:** You can navigate completion panel using a keyboard.
+
+1. Switch to source area and back to content editing mode.
+1. Repeat 1-3.