Getting errors with a styled-components element passed to renderInput

[NameFILIP]

Code: https://www.webpackbin.com/bins/-KuaSfuFx8L7pfMNn6xt

Might be related to innerRef vs ref: https://github.com/atlassian/react-beautiful-dnd/issues/34 https://github.com/styled-components/styled-components/issues/617

The error is:

Uncaught TypeError: node.getBoundingClientRect is not a function

[NameFILIP]

I found a workaround:

renderInput={props => {
  const { ref, ...rest } = props;
  return <SearchInput {...rest} innerRef={ref} />;
}}

https://www.webpackbin.com/bins/-KuaYCHnbZbo3eFXX0Zk

[CMTegner]

Hi Filip! I wouldn't really classify this as a "workaround", as it's clearly documented that you need to apply ref in a way which makes sense to your use-case.

Either way, I'm glad you found a solution!

[soflass1293]

Hello @NameFILIP Do this then what? What to do inside SearchInput component? I used it and it worked, there is no node.getBoundingClientRect error now but the suggestions are not showing anymore :/

[NameFILIP]

@soflass1293 Do this and then read the source until you figure out why it's not working 🤷‍♂️. Or share an example somewhere so that we can take a look.

[JasonhjKim]

This worked for me renderInput = { props => { return <Input {...props} /> }}

[dreamdev21]

Anyone could share me whole sample code for this solution?

[jkklapp]

This worked for me:

<AutoComplete
...
ref={el => this.input = el}
  renderInput={props => {
          const { ref, ...rest } = props;
          return (
                    <TextField {...rest} inputRef={ref}
                        id="my-component"
                        label="Start typing"
                        value={this.state.value}
                        margin="normal"
                    />
         )
  }}
...
/>

Where TextField is from material-ui

[NameFILIP]

Note, if you're using the recently released styled-components@4 the innerRef property is no longer necessary and was removed. Use just ref. More info: https://www.styled-components.com/docs/advanced#refs