Dismiss bottom sheet on return key submit

[guarani]

Fixes wordpress-mobile/gutenberg-mobile#1164

Description

Bottom sheets may contain text inputs. When a text input has focus and the keyboard is displayed, tapping the Return button on the keyboard should dismiss the bottom sheet.

How has this been tested?

There are two types of bottom sheets:

• The link sheet
• The Button block settings sheet
  (The sheet that the Latest Posts block uses does not include text inputs which use the return key on their keyboard, so its not affected by this change.)

The link sheet appears in any block that includes a rich text area such as Paragraph, Heading, Button, Image (caption), Video (caption), Cover, List, Gallery, Media & Text, etc.
The Button block settings sheet is present only on the Button block.

Paragraph Block

1. Create a Paragraph Block and add text
2. Tap the link button in the toolbar to reveal a sheet containing link options
3. Fill in the first text input
4. Tap the keyboard Return button and observe that the sheet is dismissed
5. Repeat steps 3 and 4 for any other text inputs on the sheet

Button Block

1. Create a Button Block and add text
2. Tap the link button in the toolbar to reveal a sheet containing link options
3. Fill in the first text input
4. Tap the keyboard Return button and observe that the sheet is dismissed
5. Repeat steps 3 and 4 for any other text inputs on the sheet
6. Repeat steps 2-5 using the settings button instead of the link button

Screenshots

Paragraph Block	Button Block

Types of changes

• Bug fix
• New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• 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.

[guarani]

I've been unable to test on Android today (only iOS) – if someone can help with that, that would be appreciated.

[mchowning]

This is looking good @guarani ! 🎉

I did notice on iOS that when tapping the return key the keyboard would dismiss along with the bottom sheet and then immediately reappear. I don't think this is necessarily a blocker for this PR, but if it's possible to avoid that disappear/reappear it would be nice (could either have the keybaord just disappear and not reappear or could have the keyboard remain open the whole time). FWIW, on Android the keyboard just disappears and does not reappear. What do you think?

[guarani]

FWIW, on Android the keyboard just disappears and does not reappear.

Thanks for testing this @mchowning, I'm having trouble getting the Android emulator to run (and I will get myself an Android phone soon).

I did notice on iOS that when tapping the return key the keyboard would dismiss along with the bottom sheet and then immediately reappear.

Yeah, I noticed that too. The existing behavior on iOS (prior to this PR) is:

1. Keyboard is open, user selects text, taps link toolbar button, bottom sheet is displayed above keyboard.
2. User makes edits, hits the keyboard return button and only the keyboard is dismissed (this is what we want to fix).
3. Since the bottom sheet is still open, dragging it down will close it but will also make the keyboard reappear.

I think it makes sense for the keyboard to not reappear, which will bring this in-line with Android. I can look to add the change to this PR since I think it's relevant to the issue.

[guarani]

I think it makes sense for the keyboard to not reappear, which will bring this in-line with Android. I can look to add the change to this PR since I think it's relevant to the issue.

In offline discussion, @iamthomasbishop suggested that we in fact keep iOS the way it is, and change Android so that its keyboard reappears when the the bottom sheet is dismissed. The reasoning is that since the block's input was focused before opening the bottom sheet, it should again be focused after closing the sheet.

[guarani]

I'd like to ask you for another review please @mchowning as the previous comment has now been resolved as per wordpress-mobile/gutenberg-mobile#1164 (comment).

Could I also ask you to please test on Android, @mchowning?

[mchowning]

👍 Looks good to me and we can address the (minor) Android issue separately.