[HOLD for payment 2024-08-14] [$250] Onboarding – Keyboard not appears when Business name opens in "Manage my team expenses"

[lanitochka17]

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: 9.0.12-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #45377

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with new Gmail account
3. Choose "Manage my team expenses" purpose on the first onboarding page
4. Verify Business name page opens

Expected Result:

Keyboard appears when Business name opens

Actual Result:

Keyboard not appears when Business name opens

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6552307_1721889619368.A_fix_Continue_button_is_hidden_behind_keyboard.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011303f7713569ea41
• Upwork Job ID: 1817906447482578584
• Last Price Increase: 2024-07-29

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Keyboard not appears when Business name opens in "Manage my team expenses"

What is the root cause of that problem?

We don't set useAutoFocusInput ref to the input wrapper here

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

set useAutoFocusInput ref to the input wrapper like here

const {inputCallbackRef} = useAutoFocusInput();

ref={inputCallbackRef}

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

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

Onboarding – Keyboard does not show up when Business name page opens in "Manage my team expenses".

What is the root cause of that problem?

If the below focus method gets called before the transition is complete, then it is possible that the keyboard doesn't open.

App/src/components/TextInput/BaseTextInput/index.native.tsx

Line 110 in 904e950

input.current.focus();

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

We should pass shouldDelayFocus as true in the below input field to ensure that the transition is complete before the input is focused.

App/src/pages/OnboardingWork/BaseOnboardingWork.tsx

Lines 101 to 112 in 904e950

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.WORK}
	name="fwork"
	label={translate('common.businessName')}
	aria-label={translate('common.businessName')}
	role={CONST.ROLE.PRESENTATION}
	shouldSaveDraft
	maxLength={CONST.TITLE_CHARACTER_LIMIT}
	spellCheck={false}
	autoFocus
	/>

[melvin-bot]

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

[melvin-bot]

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

[rayane-d]

@nyomanjyotisa's proposal looks good to me

🎀👀🎀 C+ reviewed