Page MenuHomePhabricator

[Bug] On Firefox mobile editor textarea should auto-expand
Closed, ResolvedPublic

Description

In T216547 we disabled the auto-expanding textarea that is used in the mobile editor overlay as there was a bug that made it unusable. This task asks to restore that behavior to improve the editing process.

The auto-expanding behaviour was disabled via browser user agent sniffing. This task asks to remove that line and fix the problem described below.

Steps to reproduce the previous problem

@Gnuish writes:

I had this problem only last week, on this page Allegheny Airlines. I tried to update the text "Founded 1939 (as Allegheny Airlines)" in the Infobox.
I was trying to edit on a OnePlus One running Firefox 35.0.
I'm trying it again. On the mobile, I accessed the page, tapped the Pencil icon. After a delay, it says "X Editing Allegheny..." at the top, with the source text of the infobox immediately below.

(I scrolled down the page)

I scrolled back up to the top and tapped the word "Allegheny" in the quoted Founded text, just after "All". The screen scrolled slightly and put a cursor in the word "airline" in the line that says:

airline = Allegheny

While I was typing this, the mobile screen went dark. When I brought it back, the cursor jumped back to where I had put it after "All" of "Founded 1939 (as Allegheny...". The damn thing keeps going dark over and over as I document what's happening. I'm going to start over.
Hit Pencil button. This time it's different. Source text comes up. I press the text after "All". The cursor goes there. I press the letter "f". It inserts the word "Member" ("AllMemberegheny Airlines").
It's just bizarro, unpredictable.
I used the Back button to get out, and tried again. The next time, it worked perfectly.

Expected results

  • Description of what should have happened.

Actual results

  • Screenshot or description of the issue.

Environments observed

  • Browser version: Firefox 35.0
  • OS version: Android
  • Device model: OnePlus One
  • Device language:

Developer notes

I cannot replicate with:

diff --git a/src/mobile.init/editor.js b/src/mobile.init/editor.js
index 90fbf5d47..d2a02b9c9 100644
--- a/src/mobile.init/editor.js
+++ b/src/mobile.init/editor.js
@@ -3,6 +3,7 @@ var M = require( '../mobile.startup/moduleLoaderSingleton' ),
 	router = mw.loader.require( 'mediawiki.router' ),
 	OverlayManager = require( '../mobile.startup/OverlayManager' ),
 	overlayManager = OverlayManager.getSingleton(),
+	Overlay = require( '../mobile.startup/Overlay' ),
 	loader = require( '../mobile.startup/rlModuleLoader' ),
 	// #ca-edit, .mw-editsection are standard MediaWiki elements
 	// .edit-link comes from MobileFrontend user page creation CTA
@@ -117,8 +118,56 @@ function setupEditor( page, skin ) {
 			mw.hook( 'mobileFrontend.editorOpening' ).fire();
 
 			return loader.loadModule( 'mobile.editor.overlay' ).then( function () {
-				var EditorOverlay = M.require( 'mobile.editor.overlay/EditorOverlay' );
-				return new EditorOverlay( editorOptions );
+				var o = new Overlay( {
+					title: 'edit test'
+				} );
+				o.$( '.overlay-content' ).html(`<textarea class="wikitext-editor mw-ui-input" cols="40" rows="100" style="height: 400px;">
+				"Sed ut perspiciatis unde omnis iste natus error sit
+				 voluptatem accusantium doloremque laudantium, totam rem aperiam,
+				  eaque ipsa quae ab illo inventore veritatis et quasi architecto
+				  
+				  beatae vitae dicta sunt explicabo. Nemo enim ipsam
+				  
+				  voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+				  
+				  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+				   incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad 
+				   minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+				   				  
+				  voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+				  
+				  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+				   incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad 
+				   minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+				   
+
+				   				  
+				  voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+				  
+				  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+				   incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad 
+				   minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+				   
+				   				  
+				  voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+				  
+				  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+				   incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad 
+				   minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+				   
+				   				  
+				  voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+				  
+				  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+				   incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad 
+				   minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+				   
+				 
+				   laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
+				   
+				   iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
+				</textarea>`);
+				return o;
 			} );
 		}

Thus the issue more then likely resides in the VisualEditor/EditorOverlay code.

The issue in fact lies in resizeEditor. It seems that when the textarea is focused and then the height is updated (auto, then new height) the scroll position is lost. This might be an upstream bug, but we can certainly workaround it.

Potential fixes

  • Do not resizeEditor for Firefox devices. This means Firefox devices have to focus the textarea and scroll to find their edit position.. this is consistent with desktop.
  • Only run resizeEditor once for Firefox. The issue seems to occur only when the textarea is focused and the height, so maybe we can set the height once, and avoid resizing it later.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 29 2019, 3:32 AM
Jdlrobson updated the task description. (Show Details)Jan 29 2019, 3:39 AM
Jdlrobson updated the task description. (Show Details)Jan 29 2019, 3:47 AM

I can replicate this on Firefox Mobile on my Android phone...

JTannerWMF moved this task from To Triage to Freezer on the VisualEditor board.Feb 12 2019, 5:08 PM
Jdlrobson updated the task description. (Show Details)Feb 13 2019, 2:22 AM
Jdlrobson updated the task description. (Show Details)Feb 14 2019, 12:47 AM
Jdlrobson triaged this task as High priority.Feb 14 2019, 12:52 AM
Jdlrobson added a subscriber: ovasileva.

According to https://analytics.wikimedia.org/dashboards/browsers/#mobile-site-by-browser about 1% of our traffic comes from Firefox. However what % of our editors are using Firefox?

Right now it's basically impossible to use the editor in Firefox so marking as high, until we can confirm either way.

@ovasileva is this our responsibility to fix or editing teams?

Jdlrobson renamed this task from [Bug] Mobile editor jumping when the first new character is entered (OnePlus One running Firefox 35.0.) to [Bug] Very difficult/impossible to edit on Firefox - mobile editor textarea jumps when new character is entered.Feb 14 2019, 12:53 AM
Jdlrobson removed Jdlrobson as the assignee of this task.Feb 14 2019, 8:14 PM

According to https://analytics.wikimedia.org/dashboards/browsers/#mobile-site-by-browser about 1% of our traffic comes from Firefox. However what % of our editors are using Firefox?

Right now it's basically impossible to use the editor in Firefox so marking as high, until we can confirm either way.

@ovasileva is this our responsibility to fix or editing teams?

If it's an issue with VE, I think it makes more sense for the editing team to take a look. @JTannerWMF - what is the best way to get this on the editing team backlog?

Jdlrobson added a subscriber: iamjessklein.

@iamjessklein we've proposed a quick fix ( T216547) to make this more usable while we work out the correct long term solution (making resize behaviour work on Firefox).

Jdlrobson renamed this task from [Bug] Very difficult/impossible to edit on Firefox - mobile editor textarea jumps when new character is entered to [Bug] On Firefox mobile editor textarea should auto-expand when new character is entered.Mar 12 2019, 7:13 PM
Jdlrobson renamed this task from [Bug] On Firefox mobile editor textarea should auto-expand when new character is entered to [Bug] On Firefox mobile editor textarea should auto-expand.
Jdlrobson lowered the priority of this task from High to Medium.
Jdlrobson updated the task description. (Show Details)

Change 558508 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Use scroll blocking hack in Firefox

https://gerrit.wikimedia.org/r/558508

Esanders added a subscriber: Esanders.

VE had a similar issue with ContentEditable: T196839

Change 558508 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Use scroll blocking hack in Firefox

https://gerrit.wikimedia.org/r/558508

Esanders claimed this task.Jun 4 2020, 2:48 PM

Fyi Traffic looks pretty low on Firefox mobile to care about this but given the merge is this still open?

Kaartic added a comment.EditedSep 17 2020, 4:21 AM

I just tried on a Firefox for Android 68.12.0esr and couldn't reproduce the issues described in this task and T240883. The editor works fine. I didn't observe any weird behaviors. So, I believe the fix works.

Jdlrobson closed this task as Resolved.Thu, Sep 24, 5:09 PM

Confirmed.