[$250] Composer - Composer box is refocused when Copying Link on Web and Desktop

@situchan

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: 9.0.6-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: N/A
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #44399

Action Performed:

Right click on a message (in web or desktop)
Select copy to clipboard

Expected Result:

User doesn't expect the composer to get refocused.

Actual Result:

Composer gets refocussed: Expected chart

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6538235_1720636352340.Composer_is_not_refocused.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01a3374b61f565b9cf
Upwork Job ID: 1811154850298352037
Last Price Increase: 2024-10-02

Issue Owner

Current Issue Owner: @situchan

@lschurr

Triggered auto assignment to @lschurr (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.

@lschurr

@lschurr 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

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

Job added to Upwork: https://www.upwork.com/jobs/~01a3374b61f565b9cf

@situchan

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

I'm the author of #44399. That's our bad not to note a precondition for the composer to automatically refocus: it must already be focused before interacting with the context menu. So this is not a valid bug considering the current expectations. We can still change the expectations but should note that this is not a regression. Thanks.

Edited by proposal-police: This proposal was edited at 2024-08-05 18:25:46 UTC.

Proposal

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

The composer is NOT refocused

What is the root cause of that problem?

When a report is focused, we set the composer focus callback with shouldFocusForNonBlurInputOnTapOutside as false by default

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

Lines 589 to 591 in a19ef98

    
           ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => { 
        
               if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused) { 
        
                   return;

When we click on the copy link, we call ReportActionComposeFocusManager.focus function to focus on the composer. The difference here is willBlurTextInputOnTapOutside is false in the native platform and true in other platforms and shouldFocusForNonBlurInputOnTapOutside is false by default so the composer is always re-focused on web/desktop and not re-focused on native

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 454 in a19ef98

hideContextMenu(true, ReportActionComposeFocusManager.focus);

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

We should keep track the composer is focused or not when we open the context menu. Then we pass it as payload data when we open the context menu.

In ReportActionComposeFocusManager, create a new variable to keep track of the time the composer is blurred. And create a function to check this. We have a check time - (composerBluredTime ?? 0) <= 100 because when we open the context menu, the composer is blurred and then the context menu is opened immediately.

let composerBluredTime: number | null = null;
function blur() {
    composerBluredTime = new Date().getTime();
}

function isJustBlured(time: number) {
    return time - (composerBluredTime ?? 0) <= 100;
}

Calling ReportActionComposeFocusManager.blur() here when the composer is blurred

ReportActionComposeFocusManager.blur()

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

Line 308 in 98d8a5a

const onBlur = useCallback(

Add an extra param isComposerFocused here

isComposerFocused = false,

App/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts

Line 121 in 98d8a5a

isOverflowMenu = false,

App/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts

Line 151 in 98d8a5a

isOverflowMenu,

In PopoverReportActionContextMenu, get this param here and pass it to BaseReportActionContextMenu

App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

Line 173 in 98d8a5a

isOverflowMenu = false,

Pass isComposerFocused as a payload data here

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Line 244 in 98d8a5a

const payload: ContextMenuActionPayload = {

Pass isComposerFocused param as ReportActionComposeFocusManager.isJustBlured(new Date().getTime()) || ReportActionComposeFocusManager.isFocused() when we open the context menu here.

false,
ReportActionComposeFocusManager.isJustBlured(new Date().getTime()) || ReportActionComposeFocusManager.isFocused(),

App/src/pages/home/report/ReportActionItem.tsx

Line 365 in 98d8a5a

setIsEmojiPickerActive as () => void,

Get isComposerFocused here and check if it's true we will

hideContextMenu(true, () => {
    if (!isComposerFocused) {
        return;
    }
    ReportActionComposeFocusManager.focus(true);
});

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 454 in 98d8a5a

onPress: (closePopover, {reportAction, reportID}) => {

The test branch here https://github.com/nkdengineer/App/tree/fix/45204

What alternative solutions did you explore? (Optional)

If we want to not focus on the composer after we select the context menu action in mWeb, we can add shouldFocusInputOnScreenFocus check here.

if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside && !shouldFocusInputOnScreenFocus) || !isFocused) {
    return;
}

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

Lines 589 to 591 in a19ef98

    
           ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => { 
        
               if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused) { 
        
                   return;

shouldFocusInputOnScreenFocus is used to consistent the focus behavior mWeb and native so we can use this

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

Lines 206 to 208 in 5af66e0

    
           // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will 
        
           // prevent auto focus on existing chat for mobile device 
        
           const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();

Platform	Focused before menu	Focused after copying link (before fix)	Focused after copying link (after fix)
Web	✅	✅
Web	❌	✅
mSafari	✅	✅
mSafari	❌	✅
mChrome	✅	✅
mChrome	❌	✅
iOS	✅	✅
iOS	❌	❌ (bug to fix)	✅
Android	✅	✅ (but no keyboard popup)
Android	❌	❌ (bug to fix)	✅

So the expected behavior is to refocus always on all platforms regardless of pre-focus status?

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@lschurr

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

@srikarparsi

I'm OOO until next week - Did we come to a decision about this one @srikarparsi?

@lschurr

@lschurr, @srikarparsi, @situchan 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

Just followed up in the thread

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@lschurr

@lschurr, @srikarparsi, @situchan 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

Closing, as we closed #vib-vsb, this is an edge case bug and not a near-term priority.

Navigation Menu

Repository navigation

[$250] Composer - Composer box is refocused when Copying Link on Web and Desktop #45204

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

104 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => {
	if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) \|\| !isFocused) {
	return;

	// We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
	// prevent auto focus on existing chat for mobile device
	const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();

[$250] Composer - Composer box is refocused when Copying Link on Web and Desktop #45204

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jul 10, 2024

lanitochka17 commented on Jul 10, 2024

lanitochka17 commented on Jul 10, 2024

melvin-bot commented on Jul 10, 2024

melvin-bot commented on Jul 10, 2024

gijoe0295 commented on Jul 10, 2024

nkdengineer commented on Jul 11, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

situchan commented on Jul 12, 2024

104 remaining items

melvin-bot commented on Sep 18, 2024

melvin-bot commented on Sep 25, 2024

melvin-bot commented on Sep 27, 2024

lschurr commented on Oct 1, 2024

melvin-bot commented on Oct 1, 2024

srikarparsi commented on Oct 1, 2024

melvin-bot commented on Oct 2, 2024

melvin-bot commented on Oct 3, 2024

mallenexpensify commented on Oct 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions