Add @username suggestions to notification and reader full comment view.

[hafizrahman]

Fixes #10328

To test:

On notification area

1. Go to Notifications tab.
2. Select Comments tab.
3. Find a comment to a site of yours that's on WordPress.com, tap it.
4. Tap Reply field.
5. Enter @ followed by username of site user or the commenter, assuming they're WordPress.com accounts.
6. Notice username suggestions are shown (this is already working prior to this PR, but just to check).
7. Delete text from Reply field.
8. Tap Expand action in Reply field.
9. Enter @ followed by username of site user or the commenter, assuming they're WordPress.com accounts.
10. Notice username suggestions are now shown.

On reader area

1. Go to Reader tab.
2. Find a WordPress.com site post, probably easiest if it's your own test site.
3. Tap the comment icon on that post.
4. Tap Reply field.
5. Enter @ followed by username of site user or the commenter, assuming they're WordPress.com accounts.
6. Notice username suggestions are shown (this is already working prior to this PR, but just to check).
7. Delete text from Reply field.
8. Tap Expand action in Reply field.
9. Enter @ followed by username of site user or the commenter, assuming they're WordPress.com accounts.
10. Notice username suggestions are now shown.

PR submission checklist:

• I have considered adding unit tests where possible.

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@shiki Question about that last checkbox above, is this change something that warrants being added to RELEASE-NOTES.txt?

[shiki]

Thank you, @hafizrahman for working on this.

It looks like there is a bug in the suggestions view. To reproduce:

1. Show the full-screen comment view
2. Add a few lines
3. Add @ to show the suggestions list

The suggestions list is always shown at the top:

I'm not quite sure what's causing it but I think it should be fixed.

[hafizrahman]

It looks like there is a bug in the suggestions view.

@shiki Thanks for reviewing things! As for this part, it seems like the dropdown generated by AutoCompleteTextView can only be set on a certain x,y location, or be anchored to a certain view. As far as I can tell, its position can't be set dynamically depending on the current triggering string cursor's location (so it can't show up right above / bottom the @... text, for example).

Here's the Stack Overflow link that was my starting point for the research.

In this case I think the current positioning at the top is already the ideal compromise, it will remain viewable and selectable regardless of the current text cursor position.

[hafizrahman]

Found a bug where if there's multiple suggestions shown in the dropdown, it's only displaying one and the rest is kind of hard to see:

Showing only first result:

Second result only shown after scrolling:

[jkmassel]

Howdy folks! I'm freezing 13.7 today, so this is being bumped to 13.8. If you'd like it to go out as part of 13.7, please target release/13.7 for this PR, and DM me once it's merged – I'll be happy to cut a new beta release!

[shiki]

Design Review Request

Hi Design Team! 👋 I was wondering you could give some inputs on this. Currently, the dropdown will always be shown at the top even if the cursor is somewhere in the bottom (#10781 (review)). Is there an existing design within the app that we can follow?

I spent some time to look at whether we can follow the cursor position. It seems quite challenging. 🤔

[osullivanchris]

@shiki Hey thanks for the ping. Strange, I was thinking I would really like to have it next to the cursor. However I think if its fixed to something, I think fixed to the keyboard can work really well.

In the left of this sketch, the suggestion box appears above the keyboard. There is an item cut off to indicate its scrollable.

On the right: I know that we can't make it dynamic depending on cursor position. But can we make it dynamic depending on the total amount of content? So that more of the list is visible when the space is available and its always close to what you're writing?

Last note - in the sketch I have drawn this full width as I think it can work nicely with the keyboard and feel more natural to scroll within. Not sure if that is easy or problematic with this component.

Keep me in the loop!

[shiki]

Thank you, @osullivanchris! Making it full width and fixing it to the keyboard sounds doable. I've seen other apps doing something similar. Making the height dynamic could be a nice-to-have but we can attempt it.

[jkmassel]

We're freezing 13.8 today, so I'm moving this forward to 13.9. If you'd like it released as part of 13.8, please adjust the target from develop to release/13.8, and let me know once this PR has been merged – I'll be happy to ship a new release candidate!

[hafizrahman]

@shiki I added some layout fixes to make the suggestion drop down stick to the bottom. This also fixed the bug I mentioned above as far as I can check.

Some screenshots:

1. When the mention is at the top:
   

2. When the mention is in the middle of the comment and showing multiple mentions:
   

3. When the mention is in the middle of the comment and there's only one result:
   

[osullivanchris]

Thanks @hafizrahman looks much better! Nice job

[shiki]

Great work, @hafizrahman!

I just wanted to note that the dropdown can cover the whole text view if there are so many suggestions.

We could use android:dropDownHeight="SOMETHING_DP" for this but I think it doesn't matter because if the cursor is at the bottom of the text field, it will still get covered.

That said, we're limited to the current architecture for this. To fully achieve the suggestion in #10781 (comment), we would probably need to concoct our own custom views. I believe what we have here is already great enough.

[shiki]

That's really smart. 👍