Merge branch 't/11724'

CHANGES.md

@@ -15,6 +15,7 @@ Fixed Issues:
 * [#13640](http://dev.ckeditor.com/ticket/13640): [IE] Fixed: Dropping a widget outside body is not handled correctly.
 * [#13533](http://dev.ckeditor.com/ticket/13533): Fixed: No progress during upload.
 * [#13680](http://dev.ckeditor.com/ticket/13680): Fixed: The parser should allow `<h1-6>` to be a child of the `<summary>` element.
+* [#11724](http://dev.ckeditor.com/ticket/11724): [Touch devices] Fixed: Drop-downs often hide right after opening them.
 
 Other Changes:
 

plugins/floatpanel/plugin.js

@@ -75,17 +75,18 @@ CKEDITOR.plugins.add( 'floatpanel', {
 				document: doc,
 				iframe: iframe,
 				children: [],
-				dir: editor.lang.dir
+				dir: editor.lang.dir,
+				showBlockParams: null
 			};
 
 			editor.on( 'mode', hide );
 			editor.on( 'resize', hide );
 
-			// Window resize doesn't cause hide on blur. (#9800)
-			// [iOS] Poping up keyboard triggers window resize
-			// which leads to undesired panel hides.
-			if ( !CKEDITOR.env.iOS )
-				doc.getWindow().on( 'resize', hide );
+			// When resize of the window is triggered floatpanel should be repositioned according to new dimensions.
+			// #11724. Fixes issue with undesired panel hiding on Android and iOS.
+			doc.getWindow().on( 'resize', function() {
+				this.reposition();
+			}, this );
 
 			// We need a wrapper because events implementation doesn't allow to attach
 			// one listener more than once for the same event on the same object.
@@ -144,6 +145,7 @@ CKEDITOR.plugins.add( 'floatpanel', {
 				var panel = this._.panel,
 					block = panel.showBlock( name );
 
+				this._.showBlockParams = [].slice.call( arguments );
 				this.allowBlur( false );
 
 				// Record from where the focus is when open panel.
@@ -423,6 +425,20 @@ CKEDITOR.plugins.add( 'floatpanel', {
 					this.onShow.call( this );
 			},
 
+			/**
+			 * Reposition panel with same parameters that was used in last {@link #showBlock} call.
+			 *
+			 * @since 4.5.4
+			 */
+			reposition: function() {
+				var blockParams = this._.showBlockParams;
+
+				if ( this.visible && this._.showBlockParams ) {
+					this.hide();
+					this.showBlock.apply( this, blockParams );
+				}
+			},
+
 			/**
 			 * Restores last focused element or simply focus panel window.
 			 */
@@ -474,6 +490,7 @@ CKEDITOR.plugins.add( 'floatpanel', {
 					}
 
 					delete this._.lastFocused;
+					this._.showBlockParams = null;
 
 					this._.editor.fire( 'panelHide', this );
 				}

tests/plugins/floatpanel/floatpanel.js

@@ -105,27 +105,35 @@
 			} );
 		},
 
-		'test panel hide on window resize': function() {
+		'test panel reposition on window resize': function() {
 			// IE7-8 can't fire custom event on DOM object.
 			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
 				assert.ignore();
 
-			// On iOS resize is fired when the keyboard pop-ups so we do not want to hide panel then.
-			if ( CKEDITOR.env.iOS ) {
-				assert.ignore();
+			var editor = this.editor,
+				showBlockSpy = sinon.spy( panel, 'showBlock' ),
+				repositionSpy = sinon.spy( panel, 'reposition' ),
+				args;
+
+			// Show panel for the first time.
+			panel.showBlock( 'testBlock2', editor.editable(), 1 );
+
+			// Mock resize event and check if panel was repositioned by calling reposition() and
+			// showBlock() for the second time.
+			if ( document.createEvent ) {
+				var e = document.createEvent( 'HTMLEvents' );
+				e.initEvent( 'resize', true, false );
+				document.body.dispatchEvent( e );
+			} else {
+				document.body.fireEvent( 'onresize' );
 			}
 
-			var editor = this.editor;
+			assert.isTrue( showBlockSpy.calledTwice, 'panel.showBlock should be called twice' );
+			assert.isTrue( repositionSpy.calledOnce, 'panel.reposition should be called once' );
 
-			testHideOn( editor, CKEDITOR.document.getWindow(), 'resize', function() {
-				if ( document.createEvent ) {
-					var e = document.createEvent( 'HTMLEvents' );
-					e.initEvent( 'resize', true, false );
-					document.body.dispatchEvent( e );
-				} else if ( document.createEventObject ) {
-					document.body.fireEvent( 'onresize' );
-				}
-			} );
+			// Check if showBlock is called second time with same parameters.
+			args = showBlockSpy.firstCall.args;
+			assert.isTrue( showBlockSpy.secondCall.calledWith( args[0], args[1], args[2] ), 'Second showBlock() call should use same arguments as first call.' );
 		},
 
 		// #9800. Scenario:
@@ -166,4 +174,4 @@
 		}
 	} );
 
-} )();
+} )();

tests/plugins/floatpanel/manual/resize.html

@@ -0,0 +1,10 @@
+
+<div style="width: 80%; margin: 0 auto">
+	<textarea cols="80" id="classic" name="classic" rows="10">
+		<p>Test</p>
+	</textarea>
+</div>
+
+<script>
+	CKEDITOR.replace( 'classic' );
+</script>

tests/plugins/floatpanel/manual/resize.md

@@ -0,0 +1,15 @@
+@bender-tags: tc, 4.5.4, 11724
+@bender-ui: collapsed
+@bender-include: ../../embedbase/_helpers/tools.js
+@bender-ckeditor-plugins: wysiwygarea,sourcearea,htmlwriter,entities,toolbar,elementspath,undo,clipboard,format,basicstyles,font,autolink,autoembed,link
+
+For *mobile* devices:
+* Tap the editable area so the software keyboard will be visible.
+* Tap the Paragraph Format drop down to see styles list.
+* Software keyboard should hide and the drop-down should be visible.
+
+For *other* devices:
+* Open the Paragraph Format.
+* Check if it's positioned correctly.
+* Resize the browser window.
+* The drop-down should either hide or be repositioned correctly.