[Hold] Getting console error when opening public room

[kavimuru]

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:

Action Performed:

1. Login as any user.
2. Open any public room (/r/5593084223054221)

Expected Result:

No console error occurs

Actual Result:

A console error occurs stating:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.32-5
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

Recording.5178.mp4

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

View all open jobs on GitHub

[melvin-bot]

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

[cubuspl42]

Proposal

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

When a user mention (MentionUserRenderer) is displayed, the console error about Function Components is shown.

What is the root cause of that problem?

MentionUserRenderer wraps a TextLink with a Tooltip, while Tooltip passes its child to Hoverable. In turn, Hoverable expects its child to be an instance of a component that accepts the ref special property.

However, TextLink is a simple function component. Function components don't support ref by default.

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

A simple, local fix is to forward the reference in TextLink.

const TextLink = forwardRef((props, ref) => {
    const rest = _.omit(props, _.keys(propTypes));
    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];

    // ...

    return (
        <Text
            ref={ref}
            // ...
        >
            {props.children}
        </Text>
    );
});

My branch

What alternative solutions did you explore?

I tried figuring out how Hoverable implementation could be adjusted, so it doesn't require its child to accept ref, but that seems to be trickier than I thought. It's probably beyond the scope of this particular issue.

[gadhiyamanan]

I think this is dupe #21496

[allroundexperts]

I think this is dupe #21496

@gadhiyamanan I think the error is same but its happening at different places.

[gadhiyamanan]

The root cause is same

[flaviadefaria]

@gadhiyamanan @allroundexperts will this be resolved by the changes in #21496?

[allroundexperts]

@gadhiyamanan @allroundexperts will this be resolved by the changes in #21496?

I think so, yes. We can keep this on hold if that works.

[flaviadefaria]

Ok so I'll put this on hold until #21496 closes and switch it to weekly.

[flaviadefaria]

Still on hold

[flaviadefaria]

Alright #21496 has now closed do we want to check if the error is still happening?

[flaviadefaria]

It looks like we're good here so closing this.