[HOLD for payment 2024-06-28] MEDIUM: Make auto-complete component work inline

[puneetlath]

Our existing auto-complete component works well, but because it has to live above the composer, it limits the size the composer can grow to when expanded. Ideally, the emoji component would work in-line, similar to Slack's so that the composer has the ability to grow to the full height.

cc @perunt

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dd591b8c1d02e181
• Upwork Job ID: 1664650244045303808
• Last Price Increase: 2023-06-02

Issue Owner

Current Issue Owner: @puneetlath

[perunt]

I'll take a look

[MelvinBot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[puneetlath]

@perunt how's it going with this one?

[perunt]

Two related PRs have been opened for this:

• For web implementation, please refer to Caret position on WEB #17331, which focuses on tracking coordinates of caret in the text input.
• For mobile implementation, please check out Cursor position react-native#49, which also deals with tracking coordinates of caret in the text input.

After these are merged, it would be possible to develop a general component that can be used for inline suggestions such as emojis or mentions.

[puneetlath]

@perunt for the react native PR, is the plan to also try to get that merged upstream?

[perunt]

I'm not certain how the review process will unfold since it's usually a lengthy one, but I've submitted an upstream pull request

[puneetlath]

@perunt would you mind laying out what you see as the path to inline auto-completion?

I see we have these two PRs, the first of which is merged, and the second of which is close to being able to merge. What's the plan after that?

Expensify/react-native#49
#17331

[perunt]

@puneetlath Yes, the first PR has been merged, and the team at Callstack is currently updating the React Native version. These changes should be available in the app in the coming days and will bring those changes into the app.
The second PR is currently in the review process. I've started working on implementing inline suggestions, but I need these changes to continue, so I've put it on hold. I think the block will be resolved as soon as we update the React Native version.

[puneetlath]

Ok cool!

[perunt]

To improve tracking of this task, I'll provide a live link to the PR that I'm waiting for link

[mallenexpensify]

Any update here @perunt ? Are you able to prioritize this? Looks like we have a handful of issues held on this. Thx

[perunt]

@mallenexpensify, the PR is in the review process. I don't know how long it could take. If you want, I can start fixing those issues with my changes right now.

[mallenexpensify]

I can start fixing those issues with my changes right now.

@puneetlath would know better than I. Thx

[puneetlath]

Woohoo! @perunt I think the next best one for you to work on would be adding the auto-suggestion component (for mentions and emojis) to the edit message dialog: #19643

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.0-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Inline auto suggestion #42630

If no regressions arise, payment will be issued on 2024-06-28. 🎊

For reference, here are some details about the assignees on this issue:

• @perunt does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@perunt] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[alitoshmatov]

I was C+ reviewer on the PR. @puneetlath Can you assign me to handle payment here

[alitoshmatov]

The PR introduce a regression here #44100. But based on the scale of changes we were doomed to miss small regression like this.

[puneetlath]

Assigned! Are there any regression tests you think we should add for this?

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @Ollyws owed $250 via NewDot
• Contributor: @perunt is from an agency-contributor and not due payment
• ROLE: @alitoshmatov paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@puneetlath)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1664650244045303808/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[puneetlath]

It looks like @alitoshmatov ended up doing the review here. So I think @Ollyws isn't due anything, but let me know if I'm mistaken.

[alitoshmatov]

@puneetlath Yes this is new feature, we require a regression tests. Testing steps in PR looks good:

Testing Emoji Suggestions:

1. Open the chat interface.
2. Type an emoji trigger, starting with :sm followed by at least two more characters (e.g., :smile).
3. Verify that the suggestion box appears adjacent to the cursor.
4. Move the cursor to a new position in the text field.
5. Again, type an emoji-like text with at least two characters following the :sm prefix.
6. Confirm that the suggestion box appears next to the cursor as expected.

Testing Mention Suggestions:

1. Open the chat interface.
2. Initiate a mention by typing the @ symbol followed by any text (e.g., @username).
3. Ensure the suggestion box pops up next to the cursor.
4. Reposition the cursor within the text field.
5. Type another mention, starting with the @ symbol.
6. Check that the suggestion box is correctly displayed adjacent to the cursor.

[puneetlath]

Awesome, thanks. GH issue for regression test is here: https://github.com/Expensify/Expensify/issues/409359

Upwork offer is here: https://www.upwork.com/nx/wm/offer/102945166

Please ping me on this issue when you've accepted.

[alitoshmatov]

@puneetlath accepted the offer

[puneetlath]

Paid. Thanks everyone!