💡 Proposal - consistent use of React references

[Patrycja Radaczyńska]

Discussed in https://github.com/contentful/forma-36/discussions/1010

^{Originally posted by denkristoffer February 25, 2021}

Forma 36 contribution proposal

What?

👋

Forma 36 doesn't currently handle React references in a consistent way (see #267). As we've talked about, v4 provides a good opportunity to take care of this. To get this consistency I suggest we always forward the reference to the root element, no matter what.

How?

For most of our components it's pretty straightforward, we use React.forwardRef and set the ref on the outermost element in the component.

It gets a bit more complicated for some of our components. We have a lot of them wrapped in for example a <div>, and for consistency I suggest we still send the reference to that element instead of whatever component is inside it. Contrived example:

import React, { forwardRef } from 'react'

interface TextFieldProps {
  ...
}

const TextField = forwardRef<HTMLHeadingElement, TextFieldProps>(
  function TextField(props, forwardedRef) {
    return (
      <div ref={forwardedRef}>
        <input {...props} />
      </div>
    )
  }
)

export default TextField

In the above example users probably DO often want the reference to the <input> and not the <div>, but I think it's better for us to stay consistent. Instead maybe we can cut down on our use of wrapping elements.

Open questions

I need your help in coming up with solutions for what to do in situations where we are throwing multiple references around. Should we export them all, or just the root?

[github-actions]

Marking issue as stale since there was no acitivty for 30 days

[Kristoffer]

Closing this as done in v4.