Heading does not forward ref

Heading component should pass down ref, as documented in https://github.com/grommet/grommet/issues/2015

Expected Behavior

<Heading ref={...}> should forward the ref to it’s underlying DOM-node as described in #2015

Actual Behavior

ref it’s not forwarded to the underlying DOM-node (its styled-component for this purpose). Hence, when you do posed(Heading), it crashes. The correct behaviour is implemented in Box, or in other words, posed(Box) works just fine.

URL, screen shot, or Codepen exhibiting the issue

Check out the following codepen: https://codesandbox.io/s/zen-thunder-xiuiv Make sure to try

1. posed(Heading) + Click Button -> The problem
2. posed(Box) + Click Button -> The correct behavior

Steps to Reproduce

1. Use <Heading ref={...} >
2. Verify, the ref you receive is the underlying headline

Your Environment

Master branch

Solution

Note: I have not tried, if this works, but I suppose it does, as it does in Box

In file https://github.com/grommet/grommet/blob/master/src/js/components/Heading/Heading.js#L32 change const HeadingWrapper = HeadingDoc || Heading; to

const HeadingWrapper = compose(
  withForwardRef,
)(HeadingDoc || Heading);

as seen in https://github.com/grommet/grommet/blob/master/src/js/components/Box/Box.js#L114

[Zyclotrop-j]

Hi @ShimiSun,

I had a look and it seems there are underlying problems that might make this difficult.

I tried in https://github.com/Zyclotrop-j/grommet/commit/5398b27ddd4c07249f8f234b4aabddcbbbb1452d. While the forwardRef actually works (also see first example https://reactjs.org/docs/forwarding-refs.html) recompose seems to do some funny stuff (see https://github.com/Zyclotrop-j/grommet/blob/68c62c0e3fcf0215433dd4abcebebac4ebf5c63d/src/js/components/__tests__/__snapshots__/components-test.js.snap#L1975).

I think some further testing is required to ensure this actually works in all situations, but I didn’t have the time to do that yet.

As a sidenote, @oorestisime, refs don’t work when put on functional components, but they do work in functional component, and in particular the forward-ref-hoc don’t even pass ref, but forwardRef, so no worries here that will just work fine 😃

[jcfilben]

I think this issue can be closed since #4371 has been merged