focus and blur aren't callable when refs are passed into TextInputFocusable

[jasperhuangg]

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

---

Expected Result:

When we pass a ref to a TextInputFocusable, focus and blur should be callable as they are basic functionality of a text input.

Actual Result:

When we call focus or blur here and here respectively, they aren't callable, even though we're passing in a ref to the TextInputFocusable here.

Action Performed:

1. Navigate to staging.expensify.cash
2. Open a conversation.
3. Attempt to open the emoji picker via the report action compose box. Notice how it doesn't open, and that a console error is logged.

Workaround:

For places where we use programmatically focus or blur TextInputFocusable, it's broken.

Platform:

Web
iOS
Android
Desktop App
Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[HorusGoul]

I got it working locally. The problem with the ref is related to the withLocalize and withOnyx HOCs. These HOCs are not forwarding the ref properly, so I've added a log statement to see what's inside the ref. Here's what it logged:

Console output

As you can see, it's logging a withOnyx component. That shouldn't happen, but it makes sense considering that the withOnyx hook doesn't forward the ref. Take a look at the code, and you'll find that React.forwardRef is not being used.

A similar thing happens with the withLocalize HOC because, again, we're not forwarding the ref correctly. We should pass it as ref, not as forwardedRef to the child of the HOC component. Take a look at this code extracted from the React Docs:

Example code from the React Docs

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

And here's our withLocalize HOC, with the fix applied:

withLocalize with the fix applied

function withLocalizeHOC(WrappedComponent) {
    const WithLocalize = (props) => {
        const translations = {
            translate: (phrase, variables) => translate(props.preferredLocale, phrase, variables),
            numberFormat: (number, options) => numberFormat(props.preferredLocale, number, options),
            timestampToRelative: timestamp => DateUtils.timestampToRelative(props.preferredLocale, timestamp),
            timestampToDateTime: (timestamp, includeTimezone) => DateUtils.timestampToDateTime(
                props.preferredLocale,
                timestamp,
                includeTimezone,
            ),
            toLocalPhone: number => toLocalPhone(props.preferredLocale, number),
            fromLocalPhone: number => fromLocalPhone(props.preferredLocale, number),
        };
        return (
            <WrappedComponent
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...props}
+               ref={props.forwardedRef}
                translate={translations.translate}
                numberFormat={translations.numberFormat}
                timestampToRelative={translations.timestampToRelative}
                timestampToDateTime={translations.timestampToDateTime}
                toLocalPhone={translations.toLocalPhone}
                fromLocalPhone={translations.fromLocalPhone}
            />
        );
    };
    WithLocalize.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`;
    WithLocalize.propTypes = {
        preferredLocale: PropTypes.string,
+       forwardedRef: PropTypes.func,
    };
    WithLocalize.defaultProps = {
        preferredLocale: 'en',
+       forwardedRef: undefined,
    };
    return React.forwardRef((props, ref) => (
        // eslint-disable-next-line react/jsx-props-no-spreading
        <WithLocalize {...props} forwardedRef={ref} />
    ));
}

Solutions

a) One of them would be to fix both HOCs to pass the refs properly, but this may lead to unexpected things breaking.

b) The other one, which would be faster and safer, is to remove the HOCs from this component and pass it either the translated strings it needs or the translate function, decoupling it from the app's global state and localization system to keeping it as a presentational component.

---

I'm more inclined to apply the solution (b) now and explore (a) in the future to avoid this from happening again. Let me know what you think.