[HOLD $1000] Date picker doesn’t show after focus on another field and press Fix the error

[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 Settings -> Workspaces => Connect Bank Account Manually => Enter invalid information for only Date of birth at step 3.
2. Now press Save & Continue, an error will show up, focus on SSN field (or any field), scroll down and press Fix the error, scroll up and press the Date picker.
3. Notice that Date picker is not responding.

Expected Result:

Date picker should show up at the bottom and respond to click

Actual Result:

Nothing happened after pressing Date picker field.

Workaround:

unknown

Platforms:

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

• Android / native
• iOS / native

Version Number: 1.2.58-2
Reproducible in staging?: y
Reproducible in production?: could not check
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:

RPReplay_Final1674318754.MP4

repros.ios.1.2301.mp4

Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1674326036607849

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c59fc18f15ea7403
• Upwork Job ID: 1618921611535593472
• Last Price Increase: 2023-02-03

[greg-schroeder]

Bug0 Triage Checklist

Note: see this SO for more information.

• The "bug" is actually a bug
• The bug is not a duplicate report of an existing GH.
  • If it is, close the GH and add any novel details to the original GH instead
• The bug is reproducible, following the reproduction steps.
  • If the GH doesn’t have steps to reliably reproduce the bug and you figure it out, then please add them.
  • If you’re unable to reproduce the bug, add the Needs reproduction label.
  • Comment on the issue outlining the steps you took to try to reproduce the bug, your results and tag the issue reporter and the Applause QA member who created the issue. Ask them to clarify reproduction steps and/or to check the reproduction steps again. Close issue.
• The GH template is filled out as fully as possible
  • The GH body and title are clear (ie. could an external contributor understand it and work on it?)
• The GH was created by an Expensify employee or a QA tester
• If the bug is an OldDot issue, you should decide whether it is widespread enough to justify fixing or it is better to wait for reunification. If it’s better to wait, close the GH & provide this justification
• If there's a link to Slack, check the discussion to see if we decided not to fix it
• Decide if the GH should be resolved by an External contributor or Internal engineer, add the appropriate label

[greg-schroeder]

Not sure about the reproduction steps, asked in Slack https://expensify.slack.com/archives/C049HHMV9SM/p1674612502037579?thread_ts=1674326036.607849&cid=C049HHMV9SM

[greg-schroeder]

Okay, got a bit more detail about the reproduction and also adjusted the OP a little bit

[melvin-bot]

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

[melvin-bot]

Current assignee @greg-schroeder is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[s77rt]

Should be on hold in favor of #14322

[marcaaron]

I'm pretty confused actually. In both of the example videos I don't see this happening:

Nothing happened after pressing Date picker field.

The date picker is unresponsive when the user tried to interact with it?

Can someone post a better video that clearly shows this behavior?

[marcaaron]

@s77rt I'm reluctant to put this on HOLD as it's not clear when exactly those design improvements would be made to this particular flow.

[marcaaron]

So the issue is that the menu doesn't open but the field gets focus? I'm still not sure because the description of the issue says:

Nothing happened after pressing Date picker field.

I don't see the date picker field getting "pressed"

[s77rt]

@marcaaron Ah my bad, I got it wrong, it's a bug.

If you click on fix the errors while focusing on another input and this takes you to the date picker, the date picker won't actually get focused (date picker won't show up) and even if you try to click on it, it won't show up either.
You will have to focus on another element first then you will be able to open date picker.

Kooha-2023-01-27-23-11-03.mp4

[marcaaron]

@fedirjh I would suggest organizing your proposal like this:

• Some clear explanation of the root cause.
• Solution in text (English) and how it addresses the root cause.
• Please do not provide code diffs and use pseudocode if necessary.

Thanks!

[fedirjh]

@marcaaron Sorry if I miss explained my proposal , I will retry that

Some clear explanation of the root cause.

To Show Date picker at the bottom , we should to add a focus handler that will trigger this.showPicker (this is missing in the actual code) . However when TextInput prop editable is set to false, then the focus event is disabled

how it addresses the root cause

we can make Datepicker focusable by enabling the editable prop , then when input receives focus we set editable to false . this workaround will let us trigger focus event and show the date picker selector at the bottom

[fedirjh]

@s77rt I think we should have the RCA to decide to hold it or not , I mean the issue may be related to Form or something else , so it's not wise to hold before we know the root cause.

[marcaaron]

To Show Date picker at the bottom , we should to add a focus handler that will trigger this.showPicker (this is missing in the actual code) . However when TextInput prop editable is set to false, then the focus event is disabled

Sorry, this still sounds like a solution. Can you try to explain what the problem is without saying how to fix it at all?

[fedirjh]

Sorry, this still sounds like a solution. Can you try to explain what the problem is without saying how to fix it at all?

The date picker isn't focusable . The date picker selector is shown on Press event . So actually focus event will do nothing . There is no focus handler to show date picker on focus.

The 2nd part even if we add focus handler to show datepicker it will never work.

Edit : the Form uses the focus event to focus errored inputs . Datepicker isn't focusable that's the issue here.

I hope this explain it.

[marcaaron]

The date picker isn't focusable

Can you be more specific here? The date picker on iOS and Android both have TextInput. Are you saying we can't focus that? There is an onFocus event here.

The 2nd part even if we add focus handler to show datepicker it will never work.

Why will it never work?

Edit : the Form uses the focus event to focus errored inputs . Datepicker isn't focusable that's the issue here.

Sorry, I don't understand what you mean at all. Can you try saying it another way?

[fedirjh]

Can you be more specific here? The date picker on iOS and Android both have TextInput. Are you saying we can't focus that? There is an onFocus event here.

When the editable prop of a TextInput is set to false, it means the user cannot modify the text inside the input field. As a result, the TextInput cannot receive focus as it is not meant to be edited by the user.

Supposing that the focus event works and we can focus the TextInput, focusing the TextInput will not show the selector at the bottom. Currently, this behavior is not yet implemented.

And that is the expected result here, when we focus the date picker in native, the selector will show up at the bottom.

[parasharrajat]

I will check the proposals sometime.

[marcaaron]

Maybe I am missing something obvious. But I have a few thoughts:

• the focus() method can be whatever we want it to be on the DatePicker component. it doesn't need to have anything to do with the TextInput at all. It's just a method that we could implement to show the DatePicker.
• I'm not sure anyone has addressed why tapping on the field after tapping on "Fix the errors" has "no effect" it seems like there was a suggestion that this is broken. I have not seen anyone mention this in their proposals to fix the problem.

So, can someone please clarify what exactly we are fixing in this issue?

@parasharrajat I would suggest to not review any of the current proposals until there is a consensus about what we are fixing and a clear explanation of the root cause. I'm going to go through and hide them so it's easier for us to focus on that.

[marcaaron]

Gonna put this issue on HOLD until we can clarify what the bug actually is. I don't agree with the doubling that just happened above since so far we have just been trying to establish what exactly we are fixing.

[marcaaron]

Actually I'm going to kick this one back to Slack. If there are 2 bugs lets report them separately and restart the conversation here.