[Due for payment 2025-08-15] [$250] Workspace - Usd currency changed displays blue border.

[jponikarchuk]

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.1.83-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: #66275
Email or phone of affected tester (no customers): Slottwo1 82@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace
3. Tap new workspace - currency - change to usd

Expected Result:

Usd currency changed must not display blue border .

Actual Result:

Usd currency changed displays blue border .

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947440784440270101
• Upwork Job ID: 1947440784440270101
• Last Price Increase: 2025-07-21
• Automatic offers:
• thelullabyy | Contributor | 108209826

Issue Owner

Current Issue Owner: @lydiabarclay

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Workspace - Usd currency changed displays blue border

What is the root cause of that problem?

The reason for this behavior is that we now use a Reanimated Modal for the currency selection component

App/src/components/CurrencyPicker.tsx

Line 112 in 4a14376

shouldUseReanimatedModal

This modal is based on the Modal from react-native:

App/src/components/Modal/ReanimatedModal/index.tsx

Line 4 in dfbbfcc

import {BackHandler, Dimensions, InteractionManager, Modal, View} from 'react-native';

The modal window from react-native has a default behavior of returning focus to the active element state when the modal window is closed, which is why, after we have something entered in the init and we select an element, the modal window closes and the focus returns to the previous active element, which is why we give box-shadow for elements that have :focus or :focus-visible state

And react-native, in turn, supports the wcag 2.1 recommendations (https://www.w3.org/TR/WCAG21/#focus-order), as a result of which, when the window is closed, the focus returns to the last active element, which in our case is the Currency picker button that was clicked before(https://www.w3.org/TR/WCAG21/#focus-visible means that when you click a button, the focus moves to it and this focus should be visible. Restoring focus to the button after a modifier helps to meet this requirement).

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

In this case, we do not need this behavior, so for this component, you can add a call to the blurActiveElement function when selecting the active element:

    const updateInput = (item: CurrencyListItem) => {
        onInputChange?.(item.currencyCode);
        blurActiveElement();
        hidePickerModal();
    };

App/src/components/CurrencyPicker.tsx

Lines 75 to 78 in dfbbfcc

	const updateInput = (item: CurrencyListItem) => {
	onInputChange?.(item.currencyCode);
	hidePickerModal();
	};

Here is a video that shows that this is the default behavior of this modal window, if you remove focus from the inlet before selecting an element, then the previous element will not be focused

2025-07-18.11.52.38.mov

We can also make this props dynamically and by default it will be false, and in this case pass it as true(Or we can add this prop to modal if needed)

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)

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.

[dmkt9]

Proposal

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

Usd currency changed displays blue border .

What is the root cause of that problem?

• When we open the modal and focus on the input, it becomes document.activeElement. When we type in the input, the browser will turn on the "hadKeyboardEvent" flag.
• When closing the modal (removing from the DOM), the input loses focus. The browser immediately looks for the next element in the DOM tree that can receive focus and assigns focus to it. Because MenuItemWithTopDescription is next to it and can receive focus due to PressableWithFeedback. Together with the above flag and having focus, the outline will appear

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

We need to make sure that when the SelectionList is unmounted (like by closing the modal) the input of the SelectionList is no longer an activeElement:

App/src/components/SelectionList/index.tsx

Lines 53 to 56 in 5c2f566

	return () => {
	document.removeEventListener('keydown', checkShouldDebounceScrolling);
	document.removeEventListener('keyup', checkShouldDebounceScrolling);
	};

return () => {
    blurActiveElement();
    document.removeEventListener('keydown', checkShouldDebounceScrolling);
    document.removeEventListener('keyup', checkShouldDebounceScrolling);
};

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

NA

What alternative solutions did you explore? (Optional)

Or do only for CurrencyPicker

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]

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

[melvin-bot]

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

[melvin-bot]

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