[HOLD for payment 2024-06-28] [Payment card / Subscription] [$250] Subscription - Keyboard opens when neither of the fields are in focus after selecting currency

[kbecciv]

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: 1.4.80-3
Reproducible in staging?: y
Reproducible in production?: new feature
Issue found when executing PR: #42771
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Paste staging.new.expensify.com/settings/subscription/add-payment-card in any chat.
3. Tap on the link.
4. Enter all the details.
5. Tap Currency.
6. Select a currency.

Expected Result:

Keyboard will not open.

Actual Result:

Keyboard opens when neither of the fields are in focus after selecting currency.

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

Bug6503996_1717685180198.RPReplay_Final1717684902.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017794b8ac770cfc92
• Upwork Job ID: 1798795318782491823
• Last Price Increase: 2024-06-06
• Automatic offers:
• ShridharGoel | Contributor | 102630012

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

Triggered auto assignment to @hayata-suenaga (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[kbecciv]

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

[ShridharGoel]

Proposal

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

Subscription - Keyboard opens when neither of the fields are in focus after selecting currency

What is the root cause of that problem?

The currency field is actually a TextInput but it opens a modal on click. On coming back, the field is focused, it's just that the focus style is being hidden because of hideFocusedState.

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 277 to 289 in a036b21

	<TextInput
	label={translate('common.currency')}
	aria-label={translate('common.currency')}
	role={CONST.ROLE.COMBOBOX}
	icon={Expensicons.ArrowRight}
	onPress={showCurrenciesModal}
	value={currency}
	containerStyles={[styles.mt5]}
	inputStyle={isHovered && styles.cursorPointer}
	hideFocusedState
	caretHidden
	/>
	)}

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

Pass disableKeyboard as true:

<TextInput
    label={translate('common.currency')}
    aria-label={translate('common.currency')}
    role={CONST.ROLE.COMBOBOX}
    icon={Expensicons.ArrowRight}
    onPress={showCurrenciesModal}
    value={currency}
    containerStyles={[styles.mt5]}
    inputStyle={isHovered && styles.cursorPointer}
    hideFocusedState
    disableKeyboard
    caretHidden
/>

What alternative options did you consider?

We can remove focus from the field when the modal is closed. Add a ref to the input field and call blur when closing the modal.

[neil-marcellini]

Not a backend bug

[ishpaul777]

@ShridharGoel Since this is marked as deployblocker, have been able to find the offending from Deploy Checklist

nvm, i think its mentioned in issue

[roryabraham]

not a blocker, the subscription page is only currently accessible by navigating directly to the link. Thus it's currently "hidden" from new users.

[melvin-bot]

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

[melvin-bot]

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

[ShridharGoel]

@ishpaul777 It is a new feature: #42771

[mananjadhav]

I can see it's open for External contributors.

Looks like @ShridharGoel's proposal would work.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Current assignee @hayata-suenaga is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[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 9.0.0-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Avoid showing keyboard for currency field #43317

If no regressions arise, payment will be issued on 2024-06-28. 🎊

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

• @mananjadhav requires payment through NewDot Manual Requests
• @ShridharGoel requires payment automatic offer (Contributor)

[mananjadhav]

I've added a comment on the offending PR here. This was an edge case related to dropdown and keyboard. I don't think any action/regression test is needed for this one.

@hayata-suenaga Can you assign a BZ member to handle the payment here?

[melvin-bot]

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

[hayata-suenaga]

@stephanieelliott, please handle the payment for this issue, please 🙇

@mananjadhav is the C+ who reviewed the PR
@ShridharGoel is the contributor who authored the PR

[melvin-bot]

@mananjadhav, @stephanieelliott, @ShridharGoel, @hayata-suenaga Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mananjadhav]

@stephanieelliott Can you please add the payout summary?

[stephanieelliott]

Summarizing payment on this issue:

• Contributor: @ShridharGoel $250 via Upwork - PAID
• Contributor+: @mananjadhav $250 please request via ND

Upwork job is here: https://www.upwork.com/jobs/~017794b8ac770cfc92

[JmillsExpensify]

$250 approved for @mananjadhav

[melvin-bot]

@mananjadhav, @stephanieelliott, @ShridharGoel, @hayata-suenaga Huh... This is 4 days overdue. Who can take care of this?

[mananjadhav]

@stephanieelliott We're good to close this issue.