[V2] innerRef doesn't work with styled(Component)

I am trying to set the ref for a <Input /> styled components.

The component has been created with const Input = styled(InputUnstyled).

I have the following react app:

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

class InputUnstyled extends React.Component {
  render() {
      var _props = this.props,
          isOpen = _props.isOpen,
          rest = _objectWithoutProperties(_props, ["isOpen"]);

      return React.createElement("input", rest);
  }
}

const Input = styled(InputUnstyled)`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.handleIsOpen = this.handleIsOpen.bind(this);
    this.state = { isOpen: false };
  }
  
  componentDidUpdate() {
     this.handleFocus(); 
  }
  componentDidMount() {
     this.handleFocus(); 
  }
  
  handleIsOpen() {
     this.setState({ isOpen: !this.state.isOpen }); 
  }
  
  handleFocus() {
     this.search.focus(); 
  }
  
  render() {
    return (
      <Wrapper>
        <button type="button" onClick={this.handleIsOpen}>Rerender</button>
        <Input type="text" isOpen={this.state.isOpen} innerRef={(search) => { this.search = search }} />
      </Wrapper>
    );
  }
}

Version

2.0.0-8

Reproduction

https://www.webpackbin.com/bins/-Kg-9xQ8QPTOnSFLmOOt

Steps to reproduce

1. Open the WebpackBin link.
2. Open your developer console.
3. Click on the button to trigger this.search.focus().

It will through an error in your developer console.

Expected Behavior

The <Input /> element should receive the :focus.

Actual Behavior

Throw error this.search.focus is not a function

[magnumnighthawk]

@philpl Thanks … That worked for me. In my case, I was trying to get the reference of a third party component, react-custom-scrollbar. I managed to do it in the following way

import Scrollbars from 'react-custom-scrollbars';

export const StyledScroll = styled(({ _ref, ...rest }) =>  <Scrollbars ref={_ref} {...rest} />)`
  /* Styles */
`;

And invoked it like this

<StyledScroll _ref={(el) => { this.scrollbar = el; }} />

[kitten]

This is not a bug, but due to how the “innerRef” logic works. Once it’s in the input props, it will pass it innerRef as ref to the underlying element , I.e. The unstyled component in your example.

Thus the component that renders Input will receive a ref, but it won’t be the element, but the unstyled component itself. If you want the element ref then either add your own ref prop and set it on the component instance, so that you can access it with its ref, or use findDOMNode.