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.