[Awaiting checklist] [$250] Mention - Delay in removing mention list when pressing CMD+K

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.67-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4523297&group_by=cases:section_id&group_order=asc&group_id=306201
Email or phone of affected tester (no customers): shussain+accoun1@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open a chat
2. Enter "@" to open mention list
3. Now press CMD+K to open search modal
4. Notice mention (or emoji) list removed after a delay

Expected Result:

Mention list should be removed without delay

Actual Result:

Delay in removing mention list when pressing CMD+K

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6463598_1714208494851.2024-04-27_14-00-16.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d621ca194199c72
• Upwork Job ID: 1784861924277809152
• Last Price Increase: 2024-05-07
• Automatic offers:
• bernhardoj | Contributor | 0
• ZhenjaHorbach | Contributor | 0

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@twisterdotcom FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The mention suggestion is closed with a delay when we open search page with shortcut.

What is the root cause of that problem?

The mention suggestion list will close when the composer is blurred.

App/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

Lines 346 to 348 in 10fc359

	useEffect(() => {
	calculateMentionSuggestion(selection.end);
	}, [selection, calculateMentionSuggestion]);

App/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

Lines 281 to 285 in 10fc359

	if (shouldBlockCalc.current || selectionEnd < 1 || !isComposerFocused) {
	shouldBlockCalc.current = false;
	resetSuggestions();
	return;
	}

When we open the search page through shortcut, the focus will shift from the composer to the search page search input after the navigation completes, so it feels delayed.

If we open the search page by mouse, then the composer is immediately blurred when we press the search button, so the issue doesn't happen.

If we open the keyboard shortcut page, then the composer will never be blurred and the suggestion will still be shown.

What changes do you think we should make in order to solve the problem?

Blur the composer immediately when the shortcut is pressed by blurring the active element.

document.activeElement.blur() // we do this for web only

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 246 to 248 in 10fc359

	() => {
	Modal.close(Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.CHAT_FINDER)));
	},

do for other shortcuts too

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Mention - Delay in removing mention list when pressing CMD+K

What is the root cause of that problem?

The main problem with issue is that when we open modal using CMD+K we still have isComposerFocused equal true

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 775 in 10fc359

isComposerFocused={textInputRef.current?.isFocused()}

And as a result, we have a short period of time when Suggestions menu is still open until the input is blurred

What changes do you think we should make in order to solve the problem?

To fix this issue we can update this line and add isFocused (or useEffect and blur input when the screen out of focus )

isComposerFocused={textInputRef.current?.isFocused() && isFocused}

OR

    useEffect(() => {
        if (isFocused) {
            return;
        }
        textInputRef.current?.blur();
    }, [isFocused]);

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 775 in 10fc359

isComposerFocused={textInputRef.current?.isFocused()}

Additional for Emoji suggestions menu we need update some code to make consistence between Emoji and Mention suggestions (These changes are not relevant in the case of useEffect, but for consistence I think these changes should be made in any case)

if (shouldBlockCalc.current || !value || !isComposerFocused) {

App/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx

Line 154 in 10fc359

if (shouldBlockCalc.current || !value) {

Like here

App/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

Line 281 in 10fc359

if (shouldBlockCalc.current || selectionEnd < 1 || !isComposerFocused) {

AND

    useEffect(() => {
        calculateEmojiSuggestion(selection.end);
    }, [selection, calculateEmojiSuggestion]);

App/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx

Lines 181 to 186 in 10fc359

	useEffect(() => {
	if (!isComposerFocused) {
	return;
	}
	calculateEmojiSuggestion(selection.end);
	}, [selection, calculateEmojiSuggestion, isComposerFocused]);

Like here

App/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

Lines 346 to 348 in 10fc359

	useEffect(() => {
	calculateMentionSuggestion(selection.end);
	}, [selection, calculateMentionSuggestion]);

Result:

2024-04-27.16.59.51.mov

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014d621ca194199c72

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

@eVoloshchak, @twisterdotcom Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[twisterdotcom]

Bump @eVoloshchak on these proposals!

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[twisterdotcom]

@isabelastisser I'll be OOO next week. Just tagging you in to move this along.

[eVoloshchak]

@bernhardoj's proposal looks good to me!

do for other shortcuts too

I agree, let's have a universal method that would ensure it's called for every shortcut

🎀👀🎀 C+ reviewed!

[twisterdotcom]

Okay, assigning @ZhenjaHorbach here, thanks for both being so cordial on this one both!

[melvin-bot]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ZhenjaHorbach]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

PR will be ready today or tomorrow

[eVoloshchak]

PR is ready, will be merged once the merge freeze is over

[AndrewGable]

PR merged

[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 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Delay in removing mention list when pressing CMD+K #42255

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

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @ZhenjaHorbach requires payment automatic offer (Contributor)

[melvin-bot]

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

• [@eVoloshchak] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak] Determine if we should create a regression test for this bug.
• [@eVoloshchak] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@twisterdotcom] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[twisterdotcom]

Payment Summary

Upwork Job

• Reviewer: @eVoloshchak paid $250 via NewDot
• Contributor: @ZhenjaHorbach paid $250 via Upwork (https://www.upwork.com/nx/wm/offer/102735169)

[twisterdotcom]

Still waiting on @eVoloshchak.

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: unable to pinpoint the exact PR that has caused this, as this was present in the initial implementation
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: I don't think an additional discussion is needed

Regression Test Proposal

1. Open a chat
2. Enter "@" or start typing an emoji name to open mentions/emoji list
3. Press CMD+K to open the search modal
4. Verify there is no delay when mentions or emoji list is hidden

Do we agree 👍 or 👎

[JmillsExpensify]

$250 approved for @eVoloshchak