React Native: @-mentions UI impedes use of @ character in posts

[guarani]

Describe the bug
With the implementation of the @-mentions feature on mobile, it became difficult to type an @ character without making it a mention.

Ideally, the user should be able to add the @ character using any of these approaches:
a. tap backspace after adding a @ character, which should dismiss the mentions UI and leave the @ character in the post
b. tap outside the mentions UI to dismiss it and leave the @ character in the post
c. tap space after adding a @ character, which should dismiss the mentions UI and leave the @ character in the post

To reproduce
Steps to reproduce the behavior:

1. Open a new post
2. Add a paragraph or other rich-text based block
3. Type an @ character and dismiss the list of @-mention users (tap outside the list to dismiss)
4. Notice how the @ character is removed from the post when the list is dismissed

Expected behavior
Dismissing the list should leave the @ character on the post, allowing users to enter the character without using an @-mention.

Screenshots

Screen recording courtesy of @designsimply: 1m11s

Smartphone:

• Device: Any iOS device
• OS: iOS
• Version: Any version

Additional information
For example, the user may wish to type a Twitter handle and would find that the current @-mention UI makes this difficult. Current workarounds include choosing any user from the @-mention list and then erase the username portion leaving the @ character in the post, or typing text and then an @ character (with no space in-between) and then deleting the leading text.

[hypest]

Fixed with #24428 and wordpress-mobile/WordPress-iOS#14598

[guarani]

@hypest I hadn't closed this because there's one aspect of this ticket which isn't fixed yet:

tap space after adding a @ character, which should dismiss the mentions UI and leave the @ character in the post

In discussions with @iamthomasbishop, we agreed that this appears to be a common interaction for dismissing mentions lists. I'll reopen this to ensure we don't lose track of this, just let me know if you think otherwise 👍

[hypest]

Fine by me either way @guarani , sorry I closed the ticket... I thought that the issue is actually now fixed and we are only looking at adding more ways to dismiss the UI.

[guarani]

No worries, and thanks for looking out for un-closed issues!

[designsimply]

In discussions with @iamthomasbishop, we agreed that this appears to be a common interaction for dismissing mentions lists. I'll reopen this to ensure we don't lose track of this, just let me know if you think otherwise 👍

I like this very much because it's the least disruptive to the writing flow.

[guarani]

The fix for iOS has been merged, WPAndroid will need the same change to dismiss the suggestion UI when typing @ followed immediately by a space.

[hypest]

For clarity, @SiobhyB is working on the Android side of the fix.

[SiobhyB]

I forgot to update that the Android side of this was merged with wordpress-mobile/WordPress-Android#14793. @guarani, are there any other pending parts to this, or are we all set to close this issue?

[guarani]

I forgot to update that the Android side of this was merged with wordpress-mobile/WordPress-Android#14793. @guarani, are there any other pending parts to this, or are we all set to close this issue?

Thanks for the ping and sorry for the late reply. I agree it can be closed and I'll go ahead and close the issue now.