[Libreoffice-commits] online.git: 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 1d885323daf63650b2a435b4a640839e1e54bca7
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Wed Aug 12 17:02:56 2020 +0300
Commit:     Tor Lillqvist <tml at collabora.com>
CommitDate: Thu Aug 13 16:58:54 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 iPhone.
    
    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/+/100611
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Reviewed-by: Tor Lillqvist <tml at collabora.com>
    Tested-by: Tor Lillqvist <tml at collabora.com>

diff --git a/loleaflet/src/layer/marker/TextInput.js b/loleaflet/src/layer/marker/TextInput.js
index 845bab5b6..6d7ec5851 100644
--- a/loleaflet/src/layer/marker/TextInput.js
+++ b/loleaflet/src/layer/marker/TextInput.js
@@ -155,6 +155,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.
@@ -165,23 +170,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 dc37c9c75..895977228 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);
 		}
 	},