Onboarding - Pressing enter after selecting company size and connections does not work

[lanitochka17]

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: 9.0.87
Reproducible in staging?: Y
Reproducible in production?: Y
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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Sign in to staging.new.expensify.com with a new account
2. On the onboarding modal click on "Manage my team's expense"
3. In the "How many employees do you have" prompt, select any size and press enter on Keyboard

Expected Result:

The onboarding modal moves to the next page, "Do you use any accounting software?"

Actual Result:

When pressing enter after selecting a size and accounting software the modal does not move to the next page

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6718131_1737292631049.bandicam_2025-01-19_15-52-39-619.mp4

View all open jobs on GitHub

[melvin-bot]

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

[Shahidullah-Muffakir]

Proposal

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

When pressing Enter key in the accounting and employees page, the user is not going to the next page.

What is the root cause of that problem?

The Button component has a pressOnEnter prop that should handle the Enter key press, but it's not working because:
The button isn't receiving focus after users make a selection

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

1. Add a reference to the Continue button using useRef
   

   App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

   Line 187 in 86b9c79

   pressOnEnter

   
   ref={continueButtonRef}
2. Add a useEffect hook that focuses the Continue button whenever a user makes a selection

    const continueButtonRef = useRef<NodeJS.Timeout | null>(null);

    // Focus the continue button when a selection is made
    useEffect(() => {
        if (userReportedIntegration !== undefined && continueButtonRef.current) {
            continueButtonRef.current.focus();
        }
    }, [userReportedIntegration]);

3. Keep the button focused until the user either clicks it or presses Enter

Do the same for BaseOnboardingEmployees as well, because the page has the same issue

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)

NA

Screen.20Recording.202025-01-19.20at.208-2.mp4

[Shahidullah-Muffakir]

We can combine it with this issue #55145

[mkzie2]

Proposal

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

When pressing enter after selecting a size and accounting software the modal does not move to the next page

What is the root cause of that problem?

When we select an option, we sync the focus, which causes the confirm button to be blurred and the enter key to not work.

App/src/components/SelectionList/BaseListItem.tsx

Line 49 in 1466369

useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);

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

Define a new prop in SelectionList is shouldSyncFocus with the default value is true, and update the condition to sync the focus here

shouldSyncFocus={!isTextInputFocusedRef.current && shouldSyncFocus && !showConfirmButton} 

App/src/components/SelectionList/BaseSelectionList.tsx

Line 551 in 1466369

shouldSyncFocus={!isTextInputFocusedRef.current}

Then we can pass this prop as false for each page that has the button with the enter key subscribe and will not navigate after selecting an option

App/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

Line 206 in 1466369

<SelectionList

App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

Line 129 in 1466369

<SelectionList

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)

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.

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-20 03:53:58 UTC.

Proposal

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

Onboarding - Pressing enter after selecting company size and connections does not work

What is the root cause of that problem?

• When onSelectRow is called, we only update the selectedCompanySize state and if any option is focused, the button will not trigger the onPress callback.
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Line 41 in 1466369

  const [selectedCompanySize, setSelectedCompanySize] = useState<OnboardingCompanySize | null | undefined>(onboardingCompanySize);

  
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Lines 131 to 134 in 1466369

  	onSelectRow={(item) => {
  	setSelectedCompanySize(item.keyForList);
  	setError('');
  	}}

  
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Lines 63 to 70 in 1466369

  	<Button
  	success
  	large
  	text={translate('common.continue')}
  	onPress={() => {
  	if (!selectedCompanySize) {
  	setError(translate('onboarding.errorSelection'));
  	return;

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

• I think storing the company size state in a component is useless and it also makes this list option selection different from any other selection list. In every selection list, we select the option and proceed if the option is pressed or clicked but in these components we only select the option.
• First we should remove the selectedCompanySize state and replace all instance of selectedCompanySize with onboardingCompanySize.
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Line 32 in 1466369

  const [onboardingCompanySize] = useOnyx(ONYXKEYS.ONBOARDING_COMPANY_SIZE);

  
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Line 41 in 1466369

  const [selectedCompanySize, setSelectedCompanySize] = useState<OnboardingCompanySize | null | undefined>(onboardingCompanySize);

• Then we should create a new function onConfirm which will contain all the logic passed to onPress prop of the button. Additionally this function will accept a prop companySize?: OnboardingCompanySize and we will replace all instance of selectedCompanySize in the function with companySize parameter.
  

  App/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

  Lines 67 to 109 in 1466369

  	onPress={() => {
  	if (!selectedCompanySize) {
  	setError(translate('onboarding.errorSelection'));
  	return;
  	}
  	Welcome.setOnboardingCompanySize(selectedCompanySize);
  	const shouldCreateWorkspace = !onboardingPolicyID && !paidGroupPolicy;
  	// We need `adminsChatReportID` for `Report.completeOnboarding`, but at the same time, we don't want to call `Policy.createWorkspace` more than once.
  	// If we have already created a workspace, we want to reuse the `onboardingAdminsChatReportID` and `onboardingPolicyID`.
  	const {adminsChatReportID, policyID} = shouldCreateWorkspace
  	? Policy.createWorkspace(undefined, true, '', Policy.generatePolicyID(), CONST.ONBOARDING_CHOICES.MANAGE_TEAM)
  	: {adminsChatReportID: onboardingAdminsChatReportID, policyID: onboardingPolicyID};
  	if (shouldCreateWorkspace) {
  	Welcome.setOnboardingAdminsChatReportID(adminsChatReportID);
  	Welcome.setOnboardingPolicyID(policyID);
  	}
  	// For MICRO companies (1-10 employees), we want to remain on NewDot.
  	if (!NativeModules.HybridAppModule || selectedCompanySize === CONST.ONBOARDING_COMPANY_SIZE.MICRO) {
  	Navigation.navigate(ROUTES.ONBOARDING_ACCOUNTING.getRoute(route.params?.backTo));
  	return;
  	}
  	// For other company sizes we want to complete onboarding here.
  	// At this point `onboardingPurposeSelected` should always exist as we set it in `BaseOnboardingPurpose`.
  	if (onboardingPurposeSelected) {
  	Report.completeOnboarding(
  	onboardingPurposeSelected,
  	CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected],
  	undefined,
  	undefined,
  	adminsChatReportID,
  	onboardingPolicyID,
  	undefined,
  	onboardingCompanySize,
  	);
  	}
  	NativeModules.HybridAppModule.closeReactNativeApp(false, true);
  	}}

• We will then update the onPress prop of the Button to onPress={() => onConfirm(onboardingCompanySize)}.
• And lastly we will update onSelectRow to:

                onSelectRow={(item) => {
                    onConfirm(item.keyForList);
                    setError('');
                }}

• Similar change will we also required in the other component.

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)

Result

Monosnap.screencast.2025-01-20.09-21-15.mp4

[github-actions]

⚠️ @Krishna2323 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).