Dismiss suggestions on space keystroke #16601

guarani · 2021-06-01T02:23:51Z

Addresses WordPress/gutenberg#24425 (for iOS)

This PR allows users to easily dismiss the suggestion UI by typing a space character after triggering the UI. This means it will now be easier to add a @ character to a post without triggering the mentions suggestions UI, or add a + character without triggering the cross-post suggestions UI.

I added this change to suggestions in the block editor, but didn't apply it to other parts of the app (e.g. comments, notification replies, etc) because that felt too far out-of-scope here. It would also make the testing steps much longer.

To test:

Verify that in the block editor, typing a space after a @ character dismisses the mentions suggestions list
Verify that in the block editor, typing a space after a + character dismisses the cross-positing suggestions list
Verify that mentions still works, ensuring that the intended recipient gets notified
Verify that cross-posting still works, ensuring that the intended recipient gets notified

Regression Notes

Potential unintended areas of impact

This change could conceivably break suggestions (both mentions and cross-posting).

What I did to test those areas of impact (or what existing automated tests I relied on)

The above manual tests.

What automated tests I added (or what prevented me from doing so)

This change affects the UI so a UI test would be best, but we only add UI tests to core flows.

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Users expect the suggestions UI to be dismissed when typing a space immediately after a trigger character (e.g. `@` for mentions, `+` for cross-posts). Addresses WordPress/gutenberg#24425 (for iOS)

peril-wordpress-mobile · 2021-06-01T02:23:55Z

You can trigger an installable build for these changes by visiting CircleCI here.

peril-wordpress-mobile · 2021-06-01T02:23:55Z

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

WordPress/Classes/ViewRelated/Gutenberg/GutenbergSuggestionsViewController.swift

enejb

I tested this and it worked really well for me. Nicely done.
Lets 🚢 it

enejb · 2021-06-02T17:49:35Z

I think this PR is ready to merge.

One thing that I found in my testing is that it is kind of hard to add a @word string that doesn't match any username.
I think we should still make it easier somehow to add the @word to the post. Is that behaviour intentional?

guarani · 2021-06-03T15:10:05Z

I think this PR is ready to merge.

Thanks!

One thing that I found in my testing is that it is kind of hard to add a @word string that doesn't match any username.
I think we should still make it easier somehow to add the @word to the post. Is that behaviour intentional?

One technique here is to type @, dismiss the suggestions UI by tapping outside it, and continue typing the username. I've recorded a video of this:

type-username.mov

Do you think this is a good user experience or could it be improved?

enejb · 2021-06-03T18:07:28Z

Thanks for pointing out that tapping on the editor will get you back into this mode.

This is what I saw.

RPReplay_Final1622743333.MP4

I think one improvement we could make is ( how I expected this would work is) if you type a word and then press space you would get back to the editor. Since that how I would have types it sequentially. @word[space]

Not sure if this has been considered before?

guarani · 2021-06-03T19:29:09Z

I think one improvement we could make is ( how I expected this would work is) if you type a word and then press space you would get back to the editor. Since that how I would have types it sequentially. @word[space]

Not sure if this has been considered before?

Thanks for the video and explanation, I think I understand your concern better now. What prevents us from dismissing the suggestion UI when the user presses space after typing a @ followed by some characters is that we also match display names, not just usernames.

So if a user suggestion is john (display name John Smith), we can't dismiss the UI when the user types @john[space] because they could be filtering by display name, which includes a space.

mchowning · 2021-06-07T13:50:27Z

WordPress/Classes/ViewRelated/Gutenberg/GutenbergSuggestionsViewController.swift

+        // The same applies for cross-posts, with "+ " instead of "@ ".
+        let dismissSequence = suggestionType.trigger + " "
+        guard searchWord != dismissSequence else {
+            onCompletion?(.success(""))


👋 @guarani ! If I'm understanding this correctly, passing this as a "success" means that we'll send off analytics indicating that the user successfully selected a suggestion, right? If that's what will happen, that doesn't feel right to me. Seems that we should be treating this as a failure case where the user did not select a suggestion (at least for the purposes of the analytics).

I imagine that the reason you're using the success case is because we get the insertion of the "space" for free when we do that, but maybe there are other reasons I'm not thinking of), whereas if we send a "failure" back to JS, then nothing gets inserted (so the space gets dropped). It feels like we have two options here:

Send back a "success" to javascript (so the space gets inserted), but send a "failure" to the analytics (that's what @SiobhyB has proposed doing on Android); or

Add a way to send text-to-be-inserted (in this case a single space) back to javascript with a "failure".

Option 2 feels cleaner to me, but it may be over-engineering for the single case where we just want to send a space back since we already get that for free with an "empty" success, so I'm sympathetic to just going with Option 1's simpler approach. If we do that though, I think we may need some comments explaining why we're doing this. Curious to hear what you (and @SiobhyB ) think though.

Thanks for catching this, @mchowning! I completely overlooked the Tracks aspect. I'm going to revert this PR for the time-being while a fix is made.

I think option 1 might work on iOS as well, but will take a look at option 2 as well.

I created a revert PR here.

Thanks for looping me into the discussion here @mchowning. :)

If there's a possibility of more cases where certain keystrokes serve to both exit the UI and update the editor (like the one proposed in wordpress-mobile/gutenberg-mobile#2943) then I'd definitely prefer to do this in the cleanest, most scalable way possible.

Are there key differences to how the JavaScript side would handle a "success" vs a "failure" message? I'd made the assumption that entering a space was a success as far as the JavaScript/editor was concerned and am not yet clear what sending a failure would look like.

Are there key differences to how the JavaScript side would handle a "success" vs a "failure" message?

Good question. The only difference that I can imagine at this point is the fact that we want to add a space at the end of a successfully inserted mention, whereas we might not want to do that when a mention was not inserted. For example, if we wanted to have a space exit the mention at any point in the mentions UI (which as Paul points out, we probably do not want to do), then we wouldn't want to add an "extra" space on after the "mention text" which already ends in a space.

This is a bit of a made up example though since we don't actually want this behavior, and this is my concern with Option 2: we don't really know what other use case there might be that would need failure-with-text, so it's hard to know how to best design it.

Not that I'm opposed to Option 2--I bias pretty strongly to finding the cleanest approach most often--but in this case I'm not sure whether it's worth much extra effort: your implementation of Option 1 on Android is quite simple and works perfectly. Doing option 1 on iOS probably won't be as simple though, so I'll be curious to see what Paul thinks after he digs in a bit.

Ah, I see, thank you for that extra context!

I left a comment, wordpress-mobile/gutenberg-mobile#2943. Once that's resolved I think we'll have a better picture of how to handle this.

I left a comment, wordpress-mobile/gutenberg-mobile#2943. Once that's resolved I think we'll have a better picture of how to handle this.

Now that wordpress-mobile/gutenberg-mobile#2943 (comment) is closed, we don't have another use case for designing a way to pass text back to the React Native world in the suggestions insertion "failure" case. I think Option 1, where we send a success event to React Native and a "failure" to analytics, is a reasonable solution here.

I'll go ahead with this on the iOS side and ping you @SiobhyB once this is ready just to sync up on merging these changes.

Perfect, thank you @guarani!

FIY the iOS PR is up: #16770

guarani added 2 commits May 31, 2021 19:36

Dismiss suggestions UI on space keystroke

831307a

Users expect the suggestions UI to be dismissed when typing a space immediately after a trigger character (e.g. `@` for mentions, `+` for cross-posts). Addresses WordPress/gutenberg#24425 (for iOS)

Fixed suggestion dismissal for Gutenberg

2380676

guarani added the [Type] Enhancement label Jun 1, 2021

guarani added this to the 17.6 milestone Jun 1, 2021

guarani changed the title ~~Fix/dismiss suggestions on space keystroke~~ Dismiss suggestions on space keystroke Jun 1, 2021

AmandaRiu self-requested a review June 1, 2021 15:10

AmandaRiu self-assigned this Jun 1, 2021

AmandaRiu removed their request for review June 1, 2021 15:13

AmandaRiu removed their assignment Jun 1, 2021

guarani requested a review from enejb June 1, 2021 16:10

guarani commented Jun 1, 2021

View reviewed changes

WordPress/Classes/ViewRelated/Gutenberg/GutenbergSuggestionsViewController.swift Show resolved Hide resolved

enejb approved these changes Jun 2, 2021

View reviewed changes

Add comment to suggestion space dismiss code

8f511be

guarani merged commit 7e5ac94 into develop Jun 3, 2021

guarani deleted the fix/dismiss-suggestions-on-space-keystroke branch June 3, 2021 15:38

guarani mentioned this pull request Jun 3, 2021

React Native: @-mentions UI impedes use of @ character in posts WordPress/gutenberg#24425

Closed

SiobhyB mentioned this pull request Jun 7, 2021

Dismiss Suggestions on Space Keystroke wordpress-mobile/WordPress-Android#14793

Merged

3 tasks

mchowning reviewed Jun 7, 2021

View reviewed changes

guarani mentioned this pull request Jun 7, 2021

Revert "Dismiss suggestions on space keystroke" #16641

Merged

guarani restored the fix/dismiss-suggestions-on-space-keystroke branch June 8, 2021 14:23

guarani deleted the fix/dismiss-suggestions-on-space-keystroke branch June 29, 2021 01:19

guarani mentioned this pull request Jun 29, 2021

Dismiss suggestions on space keystroke #16770

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dismiss suggestions on space keystroke #16601

Dismiss suggestions on space keystroke #16601

guarani commented Jun 1, 2021 •

edited

Loading

peril-wordpress-mobile bot commented Jun 1, 2021 •

edited

Loading

peril-wordpress-mobile bot commented Jun 1, 2021 •

edited

Loading

enejb left a comment

enejb commented Jun 2, 2021

guarani commented Jun 3, 2021

enejb commented Jun 3, 2021

guarani commented Jun 3, 2021

mchowning Jun 7, 2021 •

edited

Loading

guarani Jun 7, 2021

guarani Jun 7, 2021

SiobhyB Jun 7, 2021

mchowning Jun 7, 2021 •

edited

Loading

SiobhyB Jun 7, 2021

guarani Jun 9, 2021

guarani Jun 28, 2021

SiobhyB Jun 28, 2021

guarani Jun 29, 2021

Dismiss suggestions on space keystroke #16601

Dismiss suggestions on space keystroke #16601

Conversation

guarani commented Jun 1, 2021 • edited Loading

To test:

Regression Notes

peril-wordpress-mobile bot commented Jun 1, 2021 • edited Loading

peril-wordpress-mobile bot commented Jun 1, 2021 • edited Loading

enejb left a comment

Choose a reason for hiding this comment

enejb commented Jun 2, 2021

guarani commented Jun 3, 2021

enejb commented Jun 3, 2021

guarani commented Jun 3, 2021

mchowning Jun 7, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mchowning Jun 7, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guarani commented Jun 1, 2021 •

edited

Loading

peril-wordpress-mobile bot commented Jun 1, 2021 •

edited

Loading

peril-wordpress-mobile bot commented Jun 1, 2021 •

edited

Loading

mchowning Jun 7, 2021 •

edited

Loading

mchowning Jun 7, 2021 •

edited

Loading