[v4] TypeError: n.mainRef.blur is not a function

[jeroenransijn]

Culprit

evergreen-v4/esm/table/src/TableRow in apply

TableRow uses innerRef, but when using the is prop, you might not have a component that supports ref.
The Link component from react-router actually implements the same innerRef API as in ui-box/ Evergreen. In this case TableRow gets a ref that is actually a React component. As we are trying to assist focus management with things such as this.mainRef.blur things start to break

There are a couple of things we could do:

<Box is={({ getRef,  ...props }) => <RRLink innerRef={getRef} {...props} />} />

That seems asking for problems, but might solve this use case

The other way could be to make sure we are dealing with a real element in TableRow — and other components that make the assumption of seeing a element.

There might be some ways we could use the new React.forwardRef to help with this problem.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.