Focus loop flicker occurs if return button is double-clicked on a rich-text

[pinarol]

Steps to reproduce:

Focus on a rich text block like paragraph
Focus on it
Double tap return button

A focus loop occurs as seen here:

Tested on branch develop, commit 82228c565361915daaaf4a3dbec22cda721159f3

[koke]

Have you been able to verify on device as well as the simulator? This seems like a high priority one, but I couldn't reproduce on iPhone XS, WPiOS with gutenberg-mobile 1.4

[koke]

I also can't reproduce this in simulators in release/1.4.0, either on WPiOS or the demo app

[pinarol]

Yes I can see it on the device also (iPhone 6, iOS 12.0.1):

This is running on WPiOS develop commit 080b6f5860e74c243df457bb1a77bdbc0708bb3e with dependency to gutenberg 1.4.0

[hypest]

👋 @pinarol , can you also check if it happens before #928 was introduced? There were some changes in some flags in that PR and just want to make sure it didn't introduced this issue as a regression. Thanks!

[pinarol]

hey @hypest I checked with gutenberg 1.3.0 and I can repro this there too, so it doesn't look like it is related to that PR.

[pinarol]

Another thing I noticed, I can't repro the issue on Internal-Release configuration, it happens only on Debug. So it might have sth to do with the speed of the bridge communication. This lowers urgency of the issue. But still, it'd be good to know the root cause 🤔

[etoledom]

I fail to reproduce this in release builds too, so I'm moving this to Future and removing my assignment.

[k9yyy]

This bug can be 100% triggered by quickly tapping between two blocks repeatedly. Tested on iPhone 6s with iOS 13, on the App Store version of WordPress iOS.

I guess in the AztecView class (react-native-aztec/src/AztecView.js), isFocused() being a bit behind of the actual focus status may be causing the focus loop? I don't have an Xcode environment so I can't test the code to be sure though.

[mchowning]

I've found this to be much easier to recreate this on a debug build, but with a lot of very fast tapping, I also can see the issue in a release build.

WP Internal 13.3.0.20190926
physical iPhone XR
iOS 12.4.1

[designsimply]

This was reported internally and I am copying relevant steps and notes here for reference:

Steps I think I took:

1. Started at My Sites, clicked on bishop.blog.
2. Clicked Media, “+”, Choose from My Device.
3. Selected the 2:33 minute-long video, Add 1.
4. Waited for the spinning hourglass circle to complete. The video’s transparency went away.
5. Clicked on the video, clicked the Share icon in the top-right. I think I copied the URL, but didn’t end up pasting it anywhere.
6. < Media, < Back, Blog Posts, "+"
7. Added a title “Pavane in Progress” or something like that.
8. Clicked down one block, clicked the blue “+”, chose Video.
9. In the Video block, I clicked Add Video, and chose WordPress Media Library.
10. I selected the video I wanted to insert, (there was a pause by me here, but I don’t remember how long I waited), and then clicked down one block to start typing.

Potentially helpful info:

• It’s a new iPhone 11 Pro
• It was updated to 13.4.1 about 24 hours before this occurred
• The internal beta was not installed, so there were never 2 versions of the WP mobile app on there
• Everything is set to auto-update.
• The app version is 14.5 WP iOS
• site using a .blog domain
• The video is 2:33 minutes long and was recorded on the same iPhone.

^{(internal reference: p4a5px-2yi-p2 h/t @andrealeebishop)}

[maxme]

I tried on an iPad with a debug build and I wasn't able to reproduce it. Do we have a way to detect this loop? At least for debugging and getting an idea of how many users this is affecting.

[designsimply]

I observed a similar focus loop issue while testing #2254 which reported a lag when selecting multiple images to add to the Cover block with the Free Photo Library upload option. I was able to reliably replicate the focus loop problem using WPiOS 14.8.0.1 TestFlight beta by doing the steps in the 2254 issue and then tapping on the "Add title" field. (4m5s)

^{Tested with WPiOS 14.8.0.1 TestFlight beta on iPhone 11 iOS 13.4.1.}

[pinarol]

Thank you for reporting that @designsimply

@dratwas Let's discuss what we can do about this focus loop quickly as a hotfix. I know we were planning to do a refactor, but we need to upgrade react native for that and it wouldn't be quick.

I think we can consider limiting the selection to only 1 image on Cover block, wdyt?

[dratwas]

Hey @pinarol I totally agree that we can limit the selection in cover block to single image/video. I'm working on it ATM :)

[pinarol]

Thanks. It turns out allowing multiple uploads on Cover was not an intended behavior anyway.

[dratwas]

I created a PR with the fix for that wordpress-mobile/WordPress-iOS#14108

Thanks to that the cover block is in a single selection mode.

[designsimply]

I saw a focus loop happen again while I was testing cover blocks in 15.5 beta testing. I caught the last part of it on video and wanted to mention it and to note I tried to replicate and couldn't reliably replicate the problem this time. (52s)

[designsimply]

Another focus loop was reported by a user in 3312531-zen running iPad Pro latest gen 12.9” WPiOS 15.6. Examining the video they provided, it looks like it happened after tapping back and forth between a couple paragraph blocks and then tapping the three-dot menu at top right.

^{(internal reference: p9ugOq-1gR-p2#comment-2566)}

[rossanafmenezes]

Hi everyone. It sounds like this user is having a similar issue on this app review today.

Device Galaxy Note10+ 5G (d2xq)
App version 915 (15.6)
OS Android 10
User: Vampire Nox

[designsimply]

👋 I added "flicker" to the title because whenever I go to search for this issue I keep not finding it and forget the phrase "focus loop". Hopefully it will help others find this report more easily if they find additional cases to note.

[dcalhoun]

I am able to recreate a focus loop/flicker in WordPress iOS 16.7 by quickly tapping between two paragraphs. Arrived here from related #3085.

Device: iPhone 11 Pro
App Version: 16.7
OS: iOS 14.4

rich-text-focus-loop.MP4