[HOLD 14322] [$1000] Selecting a new date on the date picker and then clicking on CANCEL doesn’t show the green border

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app > Go to Settings > Go to Personal Information.
2. Go to Date
3. Click on date field to select a new date
4. Select a new date and cancel it
5. Result: You can see the green border or focus doesn’t appear on the date field
6. Repeat the same process on MWEB CHROME and see that the date field is highlighted or focused in green after clicking on the cancel button just after when you select a new date. Thus, there should be consistency in both platforms.

Expected Result:

Cancelling a new chosen date on ANDROID should also focus on the date field with a green border in the same way how WEB CHROME does it. Consistency should be maintained.

Actual Result:

Cancelling a new chosen date on ANDROID doesn’t focus on the date field with a green border.

Workaround:

unknown

Platforms:

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

• Android / native

Version Number: 1.2.70-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

border.mp4

az_recorder_20230210_224956.2.mp4

Expensify/Expensify Issue URL:
Issue reported by: @avi-shek-jha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1676008585054109

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01359a690b085f5180
• Upwork Job ID: 1625358634084769792
• Last Price Increase: 2023-02-14

[MelvinBot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kadiealexander]

I was able to reproduce this:

2023-02-14_17-40-47.mp4

I also noticed it happens in other areas of the app:

2023-02-14_17-49-23.mp4

[MelvinBot]

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

[MelvinBot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @neil-marcellini (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bernhardoj]

Proposal

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

The focused (green) border of the date picker field does not show after we close the datepicker dialog on native.

What is the root cause of that problem?

Currently, our date picker the text input editable to false. A text input that is not editable can't receive a focus event (ref). But why the border is showing when we click it? That's because we set the border style based on the visibility of the date picker dialog.

App/src/components/DatePicker/index.android.js

Line 55 in e31cb53

textInputContainerStyles={this.state.isPickerVisible ? [styles.borderColorFocus] : []}

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

We should call this.onFocus directly inside BaseTextInput onPress function if the input is not editable. Else, we can go with the input focus function.

[eVoloshchak]

I think we might put this on HOLD for the datepicker redesign

[neil-marcellini]

I agree, let's hold this one.

[kadiealexander]

Sounds good! Moving to weekly while this is on hold.

[neil-marcellini]

Still holding

[neil-marcellini]

^

[kadiealexander]

Still on hold

[neil-marcellini]

Still holding, apparently #14322 is almost done.

[s77rt]

@neil-marcellini The related PR has been merged and deployed already. I think we can open this issue again, although don't think the issue would still be reproducible.

[neil-marcellini]

@kadiealexander or @eVoloshchak would you please see if we can still reproduce the issue on Android staging if you have an android device? Once the PR for #14322 is deployed to production I can test it with Browserstack.

[eVoloshchak]

I have an android device, will test in a couple of hours

[eVoloshchak]

You can't click 'cancel' anymore, but after selecting the date picker doesn't have the green border on Android. While on mWeb chrome it does. So the issue is still there, not when you press 'cancel', but when you select a date

Screen_Recording_20230323-235512_Chrome.mp4

[s77rt]

@eVoloshchak Can you please test the mWeb on staging? The PR has been only deployed to staging.

[eVoloshchak]

My bad, the behavior is consistent with mWeb also, thanks @s77rt
Can't reproduce the issue

[neil-marcellini]

Ok, unless we need to pay someone for reporting I think we can close this. @kadiealexander do you know if we pay a reporting bonus if another issue / feature ends up fixing the bug?

[kadiealexander]

According to our guidelines:

If the bug is fixed by a PR that is not associated with your bug report, then you will not be eligible for the corresponding compensation unless you can find the PR that fixed it and prove your bug report came first.

Since the issue for the PR that fixed this came before this bug report, no reporting bonus is required here.