innerRef does not work as expected

As rightfully pointed out in https://github.com/jxnblk/rebass/issues/72#issuecomment-315534122, since 1.0.0 we should start using innerRef to get the reference as that’s the way it’s done in styled-components.

However innerRef doesn’t actually work as expected. I suspect this has to do with the fact that in src/create-component.js and src/hoc.js components are wrapped in a way that innerRef doesn’t get passed down to the children. Some details about this are explained in here: https://github.com/styled-components/styled-components/issues/927#issuecomment-309140340.

A minimal reproducible test case for this issue can be seen here:

import { Input, Button } from 'rebass'

class InputWrapper extends React.Component {

  constructor(props) {
    super(props)
    this.inputRef = null
  }

  render() {
    return (
      <div>
      <Input innerRef={ c => this.inputRef = c } />
      <Button onClick={() => this.inputRef.focus()}>Focus</Button>
      </div>
    )
  }

}

[DJTB]

I haven’t been able to get innerRef working with 2.0 either yet. However, using the <Ref /> component from Semantic UI React has solved this (at least temporarily) for me.

import { Ref } from 'semantic-ui-react';
import { Input, Button } from 'rebass';
/* ... */
<Button onClick={() => console.log(this.InputRef.value)}>Log Value</Button>
<Ref innerRef={(node) => { this.InputRef = node }}>
  <Input />
</Ref>

Perhaps a similar helper could be added to Rebass. https://github.com/Semantic-Org/Semantic-UI-React/tree/5a37f2899fcb048a01a6a51d078455f5eb9219df/src/addons/Ref

[jxnblk]

Closing this since I think #188 addresses this. Please open a new issue if not