[HOLD for payment 2024-04-05] [Simplified Collect][Taxes] Android - Workspace - Tax name field isn't auto focused the keyboard isn't visible

[kbecciv]

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: 1.4.54.0
Reproducible in staging?: y
Reproducible in production?: n
Issue found when executing PR: #37967
Issue reported by: Applause - Internal team

Action Performed:

Precondition: With a new expensifail account in OD, create a Collect workspace with workspace chat enabled.

1. In ND, log in with the same account
2. Navigate to Workspace settings - More features
3. Enable Taxes
4. Navigate to Workspace settings - Taxes
5. Tap on the "+ Add rate" button
6. Tap on the "Name" field

Expected Result:

The keyboard should be visible.

Actual Result:

Tax name field isn't auto focused, the keyboard isn't visible, only the cursor is shown. The keyboard appears if you tap inside the field.

Workaround:

n/a

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

Bug6418905_1710834758344.az_recorder_20240319_084531.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cb504f048b994348
• Upwork Job ID: 1770073117296906240
• Last Price Increase: 2024-03-19
• Automatic offers:
• alitoshmatov | Reviewer | 0

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @nkuoch (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[Krishna2323]

cc: @luacmartins

[nkdengineer]

Proposal

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

Tax name field isn't auto focused, the keyboard isn't visible, only the cursor is shown. The keyboard appears if you tap inside the field.

What is the root cause of that problem?

We pass autoFocus props into tax name TextInput that makes the cursor appears but the keyboard doesn't appear

App/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

Line 102 in 34fa987

autoFocus

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

We should use useAutoFocusInput hook in TextSelectModal and pass the ref as inputCallbackRef here instead of passing autoFocus

App/src/components/TextPicker/TextSelectorModal.tsx

Line 41 in 34fa987

<TextInput

What alternative solutions did you explore? (Optional)

NA

[kosmydel]

I think it's a duplicate of this issue: #38497

[melvin-bot]

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

[melvin-bot]

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

[allgandalf]

c.c. @luacmartins , this seems to be related to taxes

[askavyblr]

Proposal

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

The tax name field lacks auto-focus, rendering the keyboard invisible.

What is the root cause of that problem?

We don't have autofocusing behavior

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

Add autofocusing behavior by using useAutoFocusInput

const {inputCallbackRef} = useAutoFocusInput();

ref={(el) => { inputCallbackRef(el) }} and remove autoFocus

App/src/components/TextPicker/TextSelectorModal.tsx

Lines 41 to 45 in 34fa987

	<TextInput
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	value={currentValue}
	onInputChange={setValue}

What alternative solutions did you explore? (Optional)

N/A

[ahmedGaber93]

Proposal

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

Android - Workspace - Tax name field isn't auto focused the keyboard isn't visible

What is the root cause of that problem?

this a common behaviour in android native when try to focus input while transition is not ended yet.
I think the correct root cause is we don't wait animation to end then focus the input.

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

we should wait transition to end then focus input by those steps.

follow this approech in TextSelectorModal.tsx

const inputRef = useRef<BaseTextInputRef | null>(null);

<Modal
  ...
  onModalShow={() => rest?.autoFocus && inputRef.current?.focus()}
>

   <TextInput
      {...rest}
      autoFocus={false}  // <<<< add this after rest.
      ref={(e) => inputRef.current = e}  // <<<< add this after rest.
   />

</Modal>

result

Screen.Recording.2024-03-19.at.4.00.27.PM.mov

I think this approech keep controlling by prop autoFocus and not remove it.

Important

using useAutoFocusInput will foucs the input only the first time you open modal but if you back then enter the modal again it will not focus.

What alternative solutions did you explore? (Optional)

alternatively we can use useAutoFocusInput (with the limitation i explained above) and pass TextInput autoFocus={false} to prevent override it

<TextInput
  {...rest}
  autoFocus={false}  // <<<< add this after rest.
/>

[luacmartins]

This is not a blocker and something we can address in a follow up to the feature implementation.

[luacmartins]

cc @kosmydel @filip-solecki

[ArekChr]

Hey @luacmartins, I'm available to handle this issue, please assign me

[melvin-bot]

📣 @alitoshmatov 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[situchan]

I think this can be handled in #37955.
We're just looking for other pages where this issue happens.
cc: @Krishna2323

[trjExpensify]

Ah, should we hold on #37955 then? Perhaps you could test it with that PR maybe?

[situchan]

This case was not covered on that PR

[luacmartins]

Ok, so we still need this issue. cc @ArekChr since you're assigned to it

[luacmartins]

I'll take this one

[ahmedGaber93]

@luacmartins
I think you missed fixing add new rate page (current GitHub issue), and you only fix edit rate page.

App/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

Line 100 in 729d475

autoFocus

[luacmartins]

Thanks @ahmedGaber93! It seems like we were already using autoFocus there so it was working when I tested. I created a PR to make the behavior consistent.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.57-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Disable scroll on tax name page #38850

If no regressions arise, payment will be issued on 2024-04-05. 🎊

For reference, here are some details about the assignees on this issue:

• @alitoshmatov requires payment automatic offer (Reviewer)

[alitoshmatov]

No payment needed for me as C+ reviewer

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @bfitzexpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[luacmartins]

No payment needed. Closing.