Use forwardRef for all components

[NicholasBoll]

🚀 Feature Proposal

We use an API that allows the spread of extra attributes and properties to a "container" element of a component via elemProps. In some cases we even explicitly forward a reference with a naming convention like inputRef. elemProps does not forward refs for us.

Assuming ColorInput is a class component:

<ColorInput ref={ref} inputRef={inputRef} />

ref; // reference to the instance of ColorInput
inputRef; // reference to the <input> element

React has a forwardRef API that allows us to formalize the use of ref as a property on all components. We would then apply that forwarded ref to the same containing element that extra props are applied to if it makes sense.

forwardRef allows us to keep the implementation of ColorInput private and allow us to give access to the public interface of the element.

Motivation

There are many instances where it is desired to have a reference to an element of a component. We already do this in some cases (e.g. inputRef for inputs). ref can be used on components now, but that just encourages the use of methods or properties of the component. We mostly treat that interface as private and could introduce problems later as we refactor code.

Without using forwardRef, the implementation details of a component become public. For example, changing ColorInput from a Class Component to a Functional Component becomes a breaking API change.

You can always get access to any element on the page using document.querySelector. This change would make it easier to get access to the underlying element of each component without resorting to tricks or hacks to do so.

Example

// start date
<DateInput ref={startDateRef} />
<DateInput ref={endDateRef} />

// Perhaps when we choose a value for the start date, we want to focus on the end date
endDateRef.current.focus()

Downsides

Another decision for Components - what element should be forwarded? Is it the same element as the element we spread extra elemProps over?

[jpante]

Will need to look at this as a bigger milestone across all components.

[alexandrzavalii]

just faced similar issue with TextButton.
TextButton does not forwardRef.

[NicholasBoll]

All inputs and buttons forward as do new components. The Svg component still does not forward the ref.