[Awaiting Checklist] [$250] Desktop - Workspace - Blue frame appears after pressing enter while uploading a new avatar

@garrettmknight

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: v9.2.23-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1144/folder/13177019/41237781/933089030?sort=%2Bidentifier
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: Mac 15.4.1 Desktop
App Component: Workspace Settings

Action Performed:

Preconditions: Workspace has a default avatar

Open the app
Navigate to Workspace settings
Click on the Workspace avatar
Click on upload photo and select any image
5.Press Enter to save the new avatar

Expected Result:

Blue frame should not appear after pressing Enter while uploading a new avatar

Actual Result:

Blue frame appears after pressing enter while uploading a new avatar

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6964267_1759532281976.avatar.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021975259774452765689
Upwork Job ID: 1975259774452765689
Last Price Increase: 2025-10-20
Automatic offers:

daledah | Contributor | 109204888

Issue Owner

Current Issue Owner: @garrettmknight

@garrettmknight

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

Proposal

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

Blue frame appears after pressing enter while uploading a new avatar

What is the root cause of that problem?

We applies a box-shadow to elements when they are in the focus-visible state here

App/web/index.html

Lines 64 to 67 in b1a83aa

    
           :focus-visible { 
        
               outline: 0; 
        
               box-shadow: inset 0px 0px 0px 1px #5AB0FF; 
        
           }

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

We should use anchorRef?.current?.blur() to blur the button here when the user presses it

    const onPressAvatar = useCallback(
        (openPicker: OpenPicker) => {
            anchorRef.current?.blur();
            ...
        },
    );

Like the way we did here

App/src/components/Search/SearchRouter/SearchButton.tsx

Lines 37 to 38 in b1a83aa

    
           onPress={callFunctionIfActionIsAllowed(() => { 
        
               pressableRef?.current?.blur();

Then pass anchorRef to the dependency of the useCallBack function

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Or we just need to prevent the button from being focused when clicking on it:

            <PressableWithoutFeedback
                onMouseDown={(e) => e.preventDefault()}

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Proposal

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

Blue frame appears after pressing enter while uploading a new avatar

What is the root cause of that problem?

In setReturnFocus, we always return to the element that was focused before activation.

App/src/components/FocusTrap/FocusTrapForModal/index.web.tsx

Lines 19 to 25 in 1c97603

    
               setReturnFocus: (element) => { 
        
                   if (ReportActionComposeFocusManager.isFocused()) { 
        
                       return false; 
        
                   } 
        
                   return element; 
        
               }, 
        
           }}

/**
* By default, focus trap on deactivation will return to the element
* that was focused before activation.
*/
setReturnFocus?:
| FocusTargetValueOrFalse
| ((
nodeFocusedBeforeActivation: HTMLElement | SVGElement
) => FocusTargetValueOrFalse);

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

In this PR, we also tried to blur the activeElement, but it's just the workaround so we face the same issue again

In FocusTrapForModal, we can remove setReturnFocus, then set returnFocusOnDeactivate to false

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Proposal

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

Workspace - Blue frame appears after pressing enter while uploading a new avatar

What is the root cause of that problem?

We try to return to the last active element in focusTrapForModal:

App/src/components/FocusTrap/FocusTrapForModal/index.web.tsx

Lines 19 to 24 in 1c97603

    
           setReturnFocus: (element) => { 
        
               if (ReportActionComposeFocusManager.isFocused()) { 
        
                   return false; 
        
               } 
        
               return element; 
        
           },

This is why, after closing the modal window, we focus the element for loading the avatar

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

We need to add onBlur during avatar loading, which can be added here:

App/src/components/AvatarWithImagePicker.tsx

Lines 303 to 308 in 82513d3

    
           if (isUsingDefaultAvatar) { 
        
               openPicker({ 
        
                   onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}), 
        
               }); 
        
               return; 
        
           }

Or here:

App/src/components/AttachmentPicker/index.tsx

Lines 113 to 121 in 82513d3

    
           openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => { 
        
               if (isPickingRef.current) { 
        
                   return; 
        
               } 
        
               isPickingRef.current = true; 
        
               onPicked.current = newOnPicked; 
        
               fileInput.current?.click(); 
        
               onCanceled.current = newOnCanceled; 
        
           },

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

We can dynamically pass returnFocusOnDeactivate and set its default value to true (or not set a default value) and pass false in this case.
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

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

@sobitneupane

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

@daledah

Payment Summary

Contributor: @daledah paid $250 via Upwork
Contributor+: @sobitneupane due $250 via NewDot

@sobitneupane

@sobitneupane checklist please

@sobitneupane

@sobitneupane bump

Regression Test Proposal

Precondition:

Workspace has a default avatar

Test:

Navigate to Workspace settings
Click on the Workspace avatar
Click on upload photo and select any image
Press Enter(keyboard) to save the new avatar
Verify that: There's no blue border around the newly uploaded avatar.

Do we agree 👍 or 👎

BugZero Checklist:

[Contributor] 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.

The issue is probably caused by this PR as it returns focus to the previous element.
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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:
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue:

Summary here is correct

@sobitneupane

Approved $250 to @sobitneupane

	:focus-visible {
	outline: 0;
	box-shadow: inset 0px 0px 0px 1px #5AB0FF;
	}

	onPress={callFunctionIfActionIsAllowed(() => {
	pressableRef?.current?.blur();

	setReturnFocus: (element) => {
	if (ReportActionComposeFocusManager.isFocused()) {
	return false;
	}
	return element;
	},
	}}

	if (isUsingDefaultAvatar) {
	openPicker({
	onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
	});
	return;
	}

	openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
	if (isPickingRef.current) {
	return;
	}
	isPickingRef.current = true;
	onPicked.current = newOnPicked;
	fileInput.current?.click();
	onCanceled.current = newOnCanceled;
	},

[Awaiting Checklist] [$250] Desktop - Workspace - Blue frame appears after pressing enter while uploading a new avatar #71872

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 6, 2025

daledah commented on Oct 6, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

nkdengineer commented on Oct 6, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Eskalifer1 commented on Oct 6, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

melvin-bot commented on Oct 6, 2025

melvin-bot commented on Oct 6, 2025

38 remaining items

garrettmknight commented on Nov 18, 2025

Payment Summary

garrettmknight commented on Nov 21, 2025

mjasikowski commented on Nov 24, 2025

sobitneupane commented on Nov 24, 2025

Regression Test Proposal

Precondition:

Test:

sobitneupane commented on Nov 24, 2025

BugZero Checklist:

garrettmknight commented on Nov 24, 2025

quinthar commented on Dec 8, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions