Suggestion for using forwardRef for imperative API (QUESTION)

[oriSomething]

I'm not sure it's the right place but it's not a bug so I'm not sure where is the right place. (Maybe a new API)

In project I work on, there is a TextField component which is more than a wrapper for <input>. It wraps the <input> element with a <div> to overcome some limitation that needed by a requested design.

TL;DR

The forwardRef API as is seems to not be usable for this use case, because:

1. The actual wrapper is a <div> which is not what you expect when you manually want the textfield element. Because you would expect the <input> for using commands such as #focus() or #checkValidity() and so

2. But sometimes you do need the <div> container because you need to measure the element which the inner <input> is useless for. ReactDOM.findDOMNode from what I've search isn't recommended. But it also blocks the ability to use the code in React Native or other renderers

Today, I add functions to the component class such as TextField#focus() (that calls focus on the <input>) and I'll probably need to add one for TextField#getClientRects() (for measure the <div>). But, it seams redundant and not very stable as more native DOM functionality is needed to warped by the component class for imperative needs use cases (as the project grows and more needs are added).

What do you think I should do?
Maybe forwardRef need some tweaks?
Maybe a new API is needed?
Or maybe the current scenario of what I do is the least worst option?

[j-f1]

You could set up your forwardRef to target the actual <input>, then add a wrapperRef or containerRef prop that you can then pass to the <div>, allowing people to choose which element to reference.

[oriSomething]

@j-f1 First of all, thanks for the response. But than it wouldn't be straight forward to use in cases when ref comes from a "render prop" pattern. For example <Tooltip {…} renderTooltip={…} render={(props) => <TextField {...props} />} />.

[j-f1]

If you need the <div> ref more often, you could make the ref prop connect to the <div> and have a inputRef param that connects to the <input>.

[sag1v]

I would like to add an example to be sure i'm not missing something here.
Sometimes we want to get the DOM node without caring what type of children we get (function, text, class or regular DOM element).

findDOMNode was the perfect tool for this task.

Given this component:

class Trap extends React.Component {
  state = {
    trapped: false
  };

  componentDidMount() {
    const { event } = this.props;
    this.ref = findDOMNode(this);
    document.addEventListener(event, this.handleEvent);
  }

  componentWillUnmount() {
    const { event } = this.props;
    document.removeEventListener(event, this.handleEvent);
  }

  handleEvent = ({ target }) => {
    if (this.ref && this.ref.contains) {
      const trapped = this.ref.contains(target);
      this.setState({ trapped });
    }
  };

  render() {
    const { children } = this.props;
    const { trapped } = this.state;

    if (typeof children === "function") {
      return children(trapped);
    } else {
      return null;
    }
  }
}

We could use it with a simple API:
<Trap event="click">{trapped => <Box isFocused={trapped} />}</Trap>

But now with out findDOMNode we invert the responsibility of handling the ref to the consumer.
So our API must change and expose the ref function for the consumer to use it:

class TrapWithRef extends React.Component {
  state = {
    trapped: false
  };

  componentDidMount() {
    const { event } = this.props;
    document.addEventListener(event, this.handleEvent);
  }

  componentWillUnmount() {
    const { event } = this.props;
    document.removeEventListener(event, this.handleEvent);
  }

  handleEvent = ({ target }) => {
    if (this.ref && this.ref.contains) {
      const trapped = this.ref.contains(target);
      this.setState({ trapped });
    } else {
      console.log("no ref -> ", this.ref);
    }
  };

  render() {
    const { children } = this.props;
    const { trapped } = this.state;

    if (typeof children === "function") {
      return children(trapped, ref => (this.ref = ref));
    } else {
      return null;
    }
  }
}

The consumer will use it this way:

<TrapWithRef event="click">
  {(trapped, ref) => <Box innerRef={ref} isFocused={trapped} />}
</TrapWithRef>

Of course this is limiting as the consumer can't "just" render anything. for example text is out of the question, but more important the consumer will need to pass the ref down to <Box /> and attach it somewhere (let's say box is not a class component).

I don't mind this change as i understand this is a minor downgrade compare to the benefits we gain with ditching findDOMNode. I just want to be sure I'm not missing anything or maybe there is a way to keep this behavior without findDOMNode .