iOS - cursor hidden when editing on screen keyboard appears

[tg-ephox]

Issue Overview

When I tap on a paragraph block at the bottom of the viewport (where the on screen keyboard will appear) the page isn't scrolled so the cursor is hidden. Requires a HTML or Code block to be in the Post also (or any block rendering a TextareaAutosize.

Steps to Reproduce (for bugs)

1. Create post with HTML block and Paragraph
2. Add enough text to the Paragraph so that it can be tapped in the area where keyboard will appear
3. Tap the Paragraph block (to edit) at the bottom of the viewport (where the keyboard will cover it)
4. Page doesn't scroll so cursor is hidden by the keyboard.

iOS (device or simulator)

Expected Behavior

Page is scrolled so that cursor is visible

Current Behavior

Page isn't scrolled and keyboard hides cursor

Possible Solution

This is an issue in react-autosize-textarea where this.currentValue is not initialised so componentDidUpdate dispatches an un-necessary update event (https://github.com/buildo/react-autosize-textarea/blob/master/src/TextareaAutosize.js#L108).

Correcting this would fix the immediate issue but leaves 2 more...

Firstly the Toolbar will now scroll offscreen when the on screen keyboard appears. (TinyMCE mobile hit the same issue but the solution was complex)

Secondly when the content of a TextareaAutosize is changed it scrolls the page as well, in the same way that is exhibited in this issue (the un-necessary update event).

I will investigate more in the autosize library that TextareaAutosize uses to see if a fix can be found.

Related Issues and/or PRs

Todos

• Tests
• Documentation

[tg-ephox]

Can replicate autosize issue here (on iOS and on screen keyboard)

• Tap the text area
• Type on the on screen keyboard
• Page scrolls and hides text area

iOS 11 only!! works as expected in iOS 10

[tg-ephox]

TextareaAutosize appears to not be the only issue. If I replace TextareaAutosize with textarea a problem still exists the first time I select a Paragraph in the area where the on screen keyboard will be shown.

In the following video I first tap a paragraph block in the area above where the keyboard will be shown and the pages scrolls up as expected.

Next I tap a paragraph block in the area below where the keyboard will be shown and the page doesn't scroll as expected the first time, but the second time and onwards it works as expected (for that paragraph)...

[tg-ephox]

If I remove this line then it works as expected, not that this is a solution but it appears that somewhere that is manually setting focus is causing this issue...

[jorgefilipecosta]

Closing this PR for now as it duplicates #2601 ( already existing) and #4731 (more recently created to collect mobile input behaviors).
Thank you for reporting and analyzing this @tg-ephox It should be solved soon with #4775.

[jeffpaul]

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.