When tapping Space bar with Edit Profile module open, background scrolls down

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.1.6-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #57099
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Macbook Pro 2023 / Sequoia 15.2
App Component: User Settings

Action Performed:

1. Open the New Expensify app on Desktop
2. Sign into a valid account
3. Go to Profile > Avatar > Add any avatar (Keep the module open)
4. Tap "Space bar"

Expected Result:

The current page scrolls down if theres room to scroll, if not, nothing happens

Actual Result:

The background scrolls down after tapping space

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6754516_1740537616155.Spacebar_scrolls_background_.mp4

View all open jobs on GitHub

[melvin-bot]

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.

[daledah]

Proposal

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

The background scrolls down after tapping space

What is the root cause of that problem?

When users choose avatar, we will open AvatarCropModal, by default users still focus on the profile page so if they tap space, the profile page will be scrolled down

We already implemented FocusTrap in BaseModal to prevent this behavior

App/src/components/Modal/BaseModal.tsx

Lines 291 to 294 in ac83517

	<FocusTrapForModal
	active={isVisible}
	initialFocus={initialFocus}
	shouldPreventScroll={shouldPreventScrollOnFocus}

but initialFocus is false by default

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

We should set initialFocus in

App/src/components/AvatarCropModal/AvatarCropModal.tsx

Line 347 in ac83517

<Modal

const submitRef = useRef<View | HTMLElement>(null);

<Modal
...
initialFocus={() => {
                if (!submitRef.current) {
                    return false;
                }
                return submitRef.current;
            }}

...
<Button
     text={translate('common.save')}
     ref={viewRef(submitRef)}

I used the same idea as AttachmentModal

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.

[Julesssss]

Hey @thelullabyy could you please take a look at this follow-up bug from #57099? thanks

[thelullabyy]

@Julesssss Sorry, I just tested this on the production version (https://new.expensify.com/) and was able to reproduce it. So, I don’t think it’s a regression from my original PR.

[Julesssss]

Ah thank you for checking, my mistake!

[daledah]

@Julesssss Should we re-open the issue?