[$250] Cards - Year dropdown doesn’t show all options, keypad briefly appears after selection

[IuliiaHerets]

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: V9.1.7-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Other

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings - enable company cards
3. Add few cards
4. Add a direct feed card via american express - american express business card and complete the flow
5. Tap assign card - select a card and tap next
6. Select custom start date
7. Tap year
8. Dismiss the year and check the year displayed in bottom
9. Enter 2005
10. Note 2005 year is shown and can be selected but not shown in the list
11. Tap year again
12. Select a year from dropdown
13. Note keypad is shown in date page briefly

Expected Result:

In company assign card page, in the custom date field , the year dropdown must show the entire years available for selection and after selecting year from dropdown, in date page keypad must not be shown.

Actual Result:

In company assign card page, in the custom date field , the year dropdown doesn't show the entire years available for selection and after selecting year from dropdown, in date page keypad is briefly shown.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6755978_1740645075413.Screenrecorder-2025-02-27-13-42-56-176.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021895151792742517425
• Upwork Job ID: 1895151792742517425
• Last Price Increase: 2025-02-27
• Automatic offers:
• DylanDylann | Reviewer | 106462642
• daledah | Contributor | 106462643

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

Triggered auto assignment to @sonialiap (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]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-02 16:55:33 UTC.

Proposal

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

In company assign card page, in the custom date field , the year dropdown doesn't show the entire years available for selection and after selecting year from dropdown, in date page keypad is briefly shown.

What is the root cause of that problem?

1. We are not calling KeyboardUtil.dismiss() before setting the year modal picker to false

App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Lines 76 to 78 in 0856182

	onSelectRow={(option) => {
	onYearChange?.(option.value);
	}}

2. With the bug that we can't scroll when selecting the year picker because we are using 2 nested Modals here the status of 2 Modals is isVisible=true

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Lines 43 to 50 in ec99650

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={onClose}
	onModalHide={onClose}
	hideModalContentWhileAnimating
	useNativeDriver
	>

App/src/components/DatePicker/CalendarPicker/index.tsx

Lines 262 to 268 in ec99650

	<YearPickerModal
	isVisible={isYearPickerVisible}
	years={years}
	currentYear={currentYearView}
	onYearChange={onYearSelected}
	onClose={() => setIsYearPickerVisible(false)}
	/>

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

1. We should call Keyboard.dismiss first or use Keyboard.dismiss

                onSelectRow={(option) => {
                 KeyboardUtil.dismiss().then(()=>{
                        onYearChange?.(option.value);
                 });
                }}

2. To solve the problem of 2 nested modals, we shouldn't use Modal here. We can create a new route and switch from TransactionStartDateSelectorModal to TransactionStartDateSelectorPage

OR we can add new props and will set isVisible of TransactionStartDateSelectorModal to false when we select the year picker

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)

NA

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.

[melvin-bot]

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

[melvin-bot]

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

[neil-marcellini]

Hi, I'm jumping in early to help review when the time comes

[melvin-bot]

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

[DylanDylann]

In this issue, we have two bugs:

1. We can't scroll the year list on the web
2. The keyboard doesn't hide immediately right after selecting the year

@daledah's solution looks good to me

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

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

[melvin-bot]

@DylanDylann Whoops! This issue is 2 days overdue. Let's get this updated quick!

[DylanDylann]

@neil-marcellini Kindly bump

[neil-marcellini]

In this issue, we have two bugs:

1. We can't scroll the year list on the web
2. The keyboard doesn't hide immediately right after selecting the year

@daledah's solution looks good to me

🎀 👀 🎀 C+ Reviewed

I agree. Let's use the new route option to fix the first problem

[melvin-bot]

📣 @DylanDylann 🎉 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

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖