[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - loleaflet/src

[Tor Lillqvist (via logerrit)]

 loleaflet/src/layer/marker/TextInput.js       |   52 +++++++++++++++++++++-----
 loleaflet/src/map/handler/Map.TouchGesture.js |    4 ++
 2 files changed, 47 insertions(+), 9 deletions(-)

New commits:
commit 9cc07c8ea0ceadd44557ce0a612ee07121f6e788
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Wed Aug 12 17:02:56 2020 +0300
Commit:     Andras Timar <andras.timar at collabora.com>
CommitDate: Mon Aug 17 18:40:48 2020 +0200

    Stopgap fix to make the on-screen keyboard behave a bit better on iPhone
    
    Our focus and blur back-and-forth dance does not seem to work on iOS
    like it does on Android. So for now, never call the textarea element's
    blur() function explicitly on iOS.
    
    Also don't play with the readonly attribute on iPhone.
    
    Probably whether the calls to the textarea's focus() and blur()
    functions actually do anything or not might depend on whether the call
    stack originates in a user input event handler or not, for security
    reasons.
    
    Change-Id: I442f0c26ae5b36913235a7ef96820bff83535b76
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100642
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Andras Timar <andras.timar at collabora.com>

diff --git a/loleaflet/src/layer/marker/TextInput.js b/loleaflet/src/layer/marker/TextInput.js
index 8e7196e96..801c9d368 100644
--- a/loleaflet/src/layer/marker/TextInput.js
+++ b/loleaflet/src/layer/marker/TextInput.js
@@ -158,6 +158,11 @@ L.TextInput = L.Layer.extend({
 	// @acceptInput (only on "mobile" (= mobile phone) or on iOS and Android in general) true if we want to
 	// accept key input, and show the virtual keyboard.
 	focus: function(acceptInput) {
+		// console.trace('L.TextInput.focus(' + acceptInput + ')');
+
+		// Note that the acceptInput parameter intentionally
+		// is a tri-state boolean: undefined, false, or true.
+
 		// Clicking or otherwise focusing the map should focus on the clipboard
 		// container in order for the user to input text (and on-screen keyboards
 		// to pop-up), unless the document is read only.
@@ -168,23 +173,52 @@ L.TextInput = L.Layer.extend({
 
 		// Trick to avoid showing the software keyboard: Set the textarea
 		// read-only before focus() and reset it again after the blur()
-		if ((window.ThisIsAMobileApp || window.mode.isMobile()) && acceptInput !== true)
-			this._textArea.setAttribute('readonly', true);
+		if (navigator.platform !== 'iPhone') {
+			if ((window.ThisIsAMobileApp || window.mode.isMobile()) && acceptInput !== true)
+				this._textArea.setAttribute('readonly', true);
+		}
 
-		this._textArea.focus();
+		if (navigator.platform !== 'iPhone') {
+			this._textArea.focus();
+		} else if (acceptInput === true) {
+			// On the iPhone, only call the textarea's focus() when we get an explicit
+			// true parameter. On the other hand, never call the textarea's blur().
 
-		if ((window.ThisIsAMobileApp || window.mode.isMobile()) && acceptInput !== true) {
-			this._setAcceptInput(false);
-			this._textArea.blur();
-			this._textArea.removeAttribute('readonly');
-		} else {
+			// Calling blur() leads to so confusing behaviour with the keyboard not
+			// showing up when we want. Better to have it show up a bit too long that
+			// strictly needed.
+
+			// Probably whether the calls to the textarea's focus() and blur() functions
+			// actually do anything or not might depend on whether the call stack
+			// originates in a user input event handler or not, for security reasons.
+
+			// To investigate, uncomment the call to console.trace() at the start of
+			// this function, and check when the topmost slot in the stack trace is
+			// "(anonymous function)" in hammer.js (an event handler), and when it is
+			// _onMessage (the WebSocket message handler in Socket.js).
+
+			this._textArea.focus();
+		}
+
+		if (navigator.platform !== 'iPhone') {
+			if ((window.ThisIsAMobileApp || window.mode.isMobile()) && acceptInput !== true) {
+				this._setAcceptInput(false);
+				this._textArea.blur();
+				this._textArea.removeAttribute('readonly');
+			} else {
+				this._setAcceptInput(true);
+			}
+		} else if (acceptInput !== false) {
 			this._setAcceptInput(true);
+		} else {
+			this._setAcceptInput(false);
 		}
 	},
 
 	blur: function() {
 		this._setAcceptInput(false);
-		this._textArea.blur();
+		if (navigator.platform !== 'iPhone')
+			this._textArea.blur();
 	},
 
 	// Returns true if the last focus was to accept input.
diff --git a/loleaflet/src/map/handler/Map.TouchGesture.js b/loleaflet/src/map/handler/Map.TouchGesture.js
index 27792560d..4257c0212 100644
--- a/loleaflet/src/map/handler/Map.TouchGesture.js
+++ b/loleaflet/src/map/handler/Map.TouchGesture.js
@@ -390,6 +390,10 @@ L.Map.TouchGesture = L.Handler.extend({
 
 			// Show keyboard when no graphic selection, or  cursor is visible.
 			var acceptInput = !docLayer.hasGraphicSelection() || docLayer.isCursorVisible();
+
+			if (navigator.platform === 'iPhone' && docLayer._docType === 'presentation')
+				acceptInput = true;
+
 			this._map.focus(acceptInput);
 		}
 	},