Date of birth - Fix the errors functional is not functional

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue found when executing #18577

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings -> Profile -> Personal details -> Date of birth
4. Select 1984-03-31
5. Change the month to February
6. Check the input field - it should contain the incorrect value of 1984-02-31
7. Press on `fix the errors

Expected Result:

Cursor is focused on a date field with an error

Actual Result:

Nothing happens

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.20.1

Reproducible in staging?: yes

Reproducible in production?: n/a

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: Any additional supporting documentation

https://platform.applause.com/services/links/v1/external/9a2e4a34deabd1a0c80f94af7a1bfb058ea9d69c406e0eca6d1b99fef3c8b009

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[sethraj14]

@kbecciv Can you please give an expected behaviour of the fix the errors button click?

[bogoroh]

@kbecciv , So the focus actually remains on the DOB Arrows because that's where the customer left off. Here you can see that I've clicked the right arrow and my focus remains there. I believe this is working as intended.

[hungvu193]

Proposal

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

Date of birth - Fix the errors functional is not functional

What is the root cause of that problem?

With other form component, we will need to pass the innerRef in order to make it focus when it's error. With NewDatePicker we didn't have that, and we also set the editable={false} to the input, so Fix the errors functional is not functional for NewDatePicker.

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

To make it can be focused when pressing Fix the errors we should pass the innerRef inside, also to make cursor visible we need to remove editable={false} props from the input.

// pass the innerRef
export default withLocalize(
    React.forwardRef((props, ref) => (
        <NewDatePicker
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...props}
            innerRef={ref}
        />
    )),
);

// update TextInput:

<TextInput
    ref={(el) => {
        this.inputRef = el;

        if (_.isFunction(this.props.innerRef)) {
            this.props.innerRef(el);
        }
    }}

What alternative solutions did you explore? (Optional)

N/A

[Julesssss]

I see your point @bogoroh. Given that the input is no longer selectable I'm not sure what 'fix the errors' should do. Maybe nothing?

[Julesssss]

@alexpensify we removed the input field here, so I'm not sure what the expected behaviour would be here.

[Santhosh-Sellavel]

@Julesssss I've already answered here -> #15290 (comment)

There is nothing to do here,

Date field is the only field here and highlight with the error
We have the calendar always open, so the user can just pick the validate now.

@alex-mechler's comment here

Is this only happening on that specific input @kbecciv? If so, that input is non-focusable, since the calendar is always open, and thus not an issue for the reasons that @Santhosh-Sellavel mentioned.

If this is happening across every form in the app, then its an issue and we should open a new issue for it

[alexpensify]

Thanks @Julesssss-- tomorrow, I'll start a discussion to confirm the next steps here.

[Julesssss]

There is nothing to do here,
Date field is the only field here and highlight with the error
We have the calendar always open, so the user can just pick the validate now.

I agree there's no real action to take, but it seems a bit weird to keep the error message clickable in that case.

[Santhosh-Sellavel]

@Julesssss

There is nothing to do here,
Date field is the only field here and highlight with the error
We have the calendar always open, so the user can just pick the validation now.

I agree there's no real action to take, but it seems a bit weird to keep the error message clickable in that case.

This is a kind of edge case, this pretty much happens on any form with one field error where the fix the errors is clickable only once. After first clicking the field got a focus post that the fix the errors is unclickable.

What we can do is remove/hide the error with refactor if needed

[alexpensify]

@Julesssss with the last feedback, do you think we update the title and the original issue?

[Julesssss]

Hmm, so maybe we just do nothing here. Rather than having a specific exclusion for this error.

[alexpensify]

With this feedback, I'm going to close this GH. Thank you to everyone who participated in the conversation.