Contact Info Block add manual blur to fix focus issues

[illusaen]

Fixes bug where selecting and typing in an inner block on Contact Info and then exiting out of the block fast (clicking on a different unnested block) would cause cursor to stay in the original inner block and thus result in an unhideable keyboard.

Fixes #3122

Gutenberg-Mobile: #3340

NOTE: Codeclimate mentions that the component (function) is too long/complex; however, since I refactored the class component into a functional one, the entire component itself is a function. I tried refactoring out subcomponents but found that the code was harder to read. I'm going to ignore these suggestions as not relevant to this code.

Changes proposed in this Pull Request:

• Adds manual blur() call on text input if block is no longer selected.

Does this pull request change what data or activity we track or use?

No change to data/tracked activity.

Add changelog entries to affected projects

Added under changelog/fix-contact-info-focus.

Screenshots

Before	After

Testing instructions:

• Have Jetpack-enabled site with version > 8.5.
• Create new post
• Add contact info block
• Type 'test' into "Address Line 2"
• Quickly click on "Email"
• See that cursor is removed from "Address Line 2" and keyboard hides.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello illusaen! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D59584-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: May 4, 2021.
• Scheduled code freeze: April 26, 2021.

[jeherve]

I updated this branch with latest master to fix unrelated test failures.

[cameronvoell]

Hello @illusaen The changes here are working well. I see the focus correctly switching off of the address inner block now.

One piece of feedback, it was a little hard to review the change because the block was turned from a class into a function AND had the new blur function added in a single commit. As far as I can tell, this is the only new functionality added to the class:

1. jetpack/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.native.js

   Lines 75 to 81 in 0cb266c

   	useEffect( () => {
   	if ( isSelected ) {
   	return;
   	}
   	textInputRefs.forEach( ref => ref?.current?.blur() );
   	}, [ isSelected, textInputRefs ] );

2. jetpack/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.native.js

   Lines 122 to 130 in 0cb266c

   	const onBlurTextInput = index => () => {
   	if ( index >= textInputsSelected.length ) {
   	return;
   	}
   	const newTextInputsSelected = [ ...textInputsSelected ];
   	newTextInputsSelected[ index ] = false;
   	setTextInputsSelected( newTextInputsSelected );
   	};

3. jetpack/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.native.js

   Line 144 in 0cb266c

   onBlur={ onBlurTextInput( index ) }

As you can see there is no easy way to see that this is the only new functionality, because that code was introduced in the same commit as the conversion to function here: 1168eaa

In the future, splitting out these two updates into two different commits would be helpful.

In this case the change looks pretty safe, and all is working as expected. Nice job with the fix!

[illusaen]

As you can see there is no easy way to see that this is the only new functionality, because that code was introduced in the same commit as the conversion to function here: 1168eaa

In the future, splitting out these two updates into two different commits would be helpful.

@cameronvoell Thanks for your time! I'll definitely do that next time, didn't even think of that!

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D59584-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[jeherve]

r225432-wpcom