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

[mitarachim]

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

1. Open the app
2. Navigate to Workspace settings
3. Click on the Workspace avatar
4. 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:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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.

[daledah]

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?

1. 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();

2. 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.

[nkdengineer]

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.

[Eskalifer1]

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.

[melvin-bot]

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

[melvin-bot]

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