[RNMobile]: Fix search block focus issues

[AmandaRiu]

NOTE: This PR must be merged before this one can be taken out of draft

Gutenberg Mobile PR: wordpress-mobile/gutenberg-mobile#3210

Description

Fixes an couples issues found in a previous PR review:

• iOS: When adding a new search block when there are other text-based blocks already on the page would cause a bizarre UI issue where the search block kept stealing the focus causing a strange blinking of focusing between the search block and the other text blocks.
• Also on iOS when adding the search block, the app would appear to hang for a while before finally adding the block.
• Clicking on the placeholder text input when the search block was not selected would not select the block.

How has this been tested?

Tested on both Android emulator and iOS simulator

1. Add a text block to the page.
2. Add a search block. Notice the placeholder text input has the focus.
3. Click the text in the text block added from step 1. Notice the focus remains on the text block as expected.
4. Click the placeholder text. Notice the search block is now selected.
5. Click the button text of the search block and modify it. Verify successful.
6. Click the search label text and modify it. Verify successful.

Screenshots

iOS before - search block stealing focus from text-based blocks

Screen.Recording.2021-03-02.at.10.27.29.PM.mov

iOS After:

Screen.Recording.2021-03-02.at.10.15.04.PM.mov

Android before - selecting placeholder text field when block not selected:

Screen.Recording.2021-03-02.at.10.26.38.PM.mov

Android after - placeholder text is focused when block first added:

Screen.Recording.2021-03-02.at.10.21.38.PM.mov

Types of changes

• Started tracking when different components of the Search Block are focused and passing that state via the isSelected property of those components.
• Passed the Search Block's onFocus prop to it's child components so when the placeholder text was directly clicked the block would become selected.
• Swapped out the TextInput component with the PlainText component.
• Added a blur() method to the PlainText component and then added a useEffect to be called when theisSelected property changes to force the PlainText to blur when the Search Block is no longer selected. Similar things are done in other blocks (Image, MediaText, Video) except they implement a static getDerivedStateFromProps method to do the same thing. It works in those blocks because they are React classes. My Search Block is a Function Component so I'm using useEffect to accomplish the same thing.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[cameronvoell]

The focus behavior is looking much better @AmandaRiu 🙌

One thing I noticed is that when you unselect the search block while one of the text fields was selected (with the blinking cursor active) - the blinking cursor stays active on that text field even though another block is now selected, and the user can still type in that field even though a new block is selected. I think the expected behavior would be that when you select a new block, the cursor should not remain active in the previously selected text field of the search block. My hunch is that it would be best to address that in this PR, but let me know if you think a separate PR would be better 🙏

[AmandaRiu]

Thanks for the review @cameronvoell !

My hunch is that it would be best to address that in this PR, but let me know if you think a separate PR would be better

I agree it should be handled in this PR. I'll take a look at it today 🙇‍♀️

[AmandaRiu]

@cameronvoell Issue with text not losing focus when block loses focus has been fixed in 452356a. Ready for another review! 👍

[cameronvoell]

@cameronvoell Issue with text not losing focus when block loses focus has been fixed in 452356a. Ready for another review! 👍

@AmandaRiu In my tests it looks like it is fixed for focus on the Button text, and the label text, but not the placeholder text.

Steps:

1. Add an image block and add an image to it
2. Add a search block
3. select the placeholder text so the cursor is active there and the keyboard is opened.
4. Select the Image block
5. Notice the cursor is still active in the placeholder and the keyboard did not close. Compare this to label and button text where the cursor would disappear and the keyboard would close when you select the image block.

[AmandaRiu]

@cameronvoell Issue with text not losing focus when block loses focus has been fixed in 452356a. Ready for another review! 👍

@AmandaRiu In my tests it looks like it is fixed for focus on the Button text, and the label text, but not the placeholder text.

Steps:

1. Add an image block and add an image to it

2. Add a search block

3. select the placeholder text so the cursor is active there and the keyboard is opened.

4. Select the Image block

5. Notice the cursor is still active in the placeholder and the keyboard did not close. Compare this to label and button text where the cursor would disappear and the keyboard would close when you select the image block.

Fixed! Ready for another round!

[AmandaRiu]

Hey @guarani 👋 I’ve made the changes we discussed. Ready for another review!

[guarani]

Tested on iOS and Android, code looks good! Great work, @AmandaRiu! 💯