DEV: Web - Console error when clicked on Reimbursements

[kbecciv]

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

---

Action Performed:

1. Open settings > Workspaces >
2. Select a workspace from the list
3. Click Reimbursements

Expected Result:

There shouldn't be a console error

Actual Result:

onsole error: Warning: Failed prop type: The prop innerRefis marked as required inPressableWithDelayToggle, but its value is null`.

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

Screenshare.-.2023-07-29.11_29_55.AM.mp4

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

View all open jobs on GitHub

[melvin-bot]

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

[c3024]

Proposal

Console error when clicked on reimbursement in workspace

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

We are not supplying defaultProp innerRef here

App/src/components/Pressable/PressableWithDelayToggle.js

Line 59 in eb02006

const defaultProps = {

even though it is required here.

App/src/components/Pressable/PressableWithDelayToggle.js

Line 16 in eb02006

innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]).isRequired,

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

Add here after this

App/src/components/Pressable/PressableWithDelayToggle.js

Line 69 in eb02006

iconChecked: Expensicons.Checkmark,

this

innerRef: () => {},

As identified by joh42, this component is used in several pages and in all those pages this warning appears.

What alternative solutions did you explore? (Optional)

Result

[bfitzexpensify]

Adding engineering to confirm reproduction.

[melvin-bot]

Triggered auto assignment to @youssef-lr (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[joh42]

The same error is also present on the following pages:

• 2FA (Settings > Security > Two-factor authentication)
• Contact methods (Settings > Profile > Contact method)

[gadhiyamanan]

this is dupe of #23093

[bfitzexpensify]

Good find @gadhiyamanan. Error in the console is the same. Closing this out.