Editor Doesn't Scroll When Typing Text Into Paragraph Block on iOS

[mdrockwell]

Describe the bug
When typing text into the paragraph block, the cursor can go behind the keyboard and out of the field of view. The editor should automatically scroll so that you can see what is being typed.

To Reproduce
Steps to reproduce the behavior:

1. Open the editor.
2. Insert content and position a paragraph block near the bottom of the field of view (just above the keyboard).
3. Type text until the text cursor moves out of view below the keyboard.

Expected behavior
The editor should automatically scroll so that the text your typing is within view.

Screenshots

RPReplay_Final1633206941.mov

Smartphone (please complete the following information):

• Device: iPhone 13 Pro
• OS: iOS 15.0.1
• Version WordPress for iOS 18.3

[antonis]

I quickly tested this with two old installations on my device and I was able to reproduce this behaviour in version 17.6 but but not in 16.8.
The issue is not reproduced on the latest Android version.

[antonis]

I tested on 17.5 and wasn't able to reproduce the issue.
Thus this was introduced with 17.6.
I did a quick investigation and I don't see something obviously suspicious in the changes introduced in this release on the native iOS or gutenberg side. Further investigation is needed to determine the commit that introduced this and come up with a fix.

[fluiddot]

I investigated this issue further and debugged the react-native-keyboard-aware-scroll-view package, as the KeyboardAwareFlatList component is the one involved in scrolling the content by the position of the caret (reference).

As far as I checked, the issue is produced when taking the target ID from the native event sent by Aztec (reference) after the selection changes. The expected value in the function in charge of updating the scroll (KeyboardAwareHOC#_refreshScrollForField) is a number, but we're sending a ReactNativeFiberHostComponent object instead (reference), so the scroll never gets updated. Besides, this is only happening on iOS because on Android, the handleCaretVerticalPositionChange function is disabled (reference) as this behavior is managed by the OS.

I'm not sure what change introduced this issue, but my gut feeling is that it has to do with the React Native upgrade to version 0.64.0 (reference), as the react-native-keyboard-aware-scroll-view package (reference), as well as React, were both updated potentially causing a change in the events coming from the native side. However, per this comment, looks like the issue was first introduced in 1.55.0 (17.6), and the upgrade was released in the next version 1.56.0 (17.7) 🤔 .

In any case, taking the target ID from event.nativeEvent.target instead of event.target should be enough to address the issue. I'll open a PR with the fix as soon as possible.