Warning: ref is not a prop

[sabina4]

Hello,

I am using ref in <Select.Creatable ref={(node) => this.selector = node} /> and getting this warning:
CreatableSelect: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

[aaronincincy]

#1646 appears to be causing warnings for me ([email protected], [email protected]). I'm using ref={r=>this.selector = r} and getting:

Warning: CreatableSelect: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

I believe this is because ref is reserved, so you can't really pass it through like you are. If you renamed it to selectRef for Creatable (and updated the documentation for this exception to the Select API) I believe that would solve the issue.

My code seems to still work ok (it was working before upgrading from rc10), but I'd like to get rid of the warning if possible.

[jonfreedman]

I am also seeing this warning in the console, it would be great to be able get rid of it.

This is with react 16.2.0 & react-select 1.2.0

[x2es]

Also got this warning.
React docs suggest to use kindOfCustomRef prop instead ref
https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

[lynxtaa]

As a temporary solution, you can wrap Creatable in class-based component like this:

import { Creatable as ReactSelectCreatable } from 'react-select'
class Creatable extends React.Component {
  render() {
    return <ReactSelectCreatable {...this.props} />
  }
}

Or wrap in toClass, if you are using recompose

[jfengel]

I am also seeing this error, but oddly, only via react-virtualized-select. When I use the component directly, it presents no problems.

The error, as far as I can tell, refers to the ref: PropTypes.func on line 293. When I remove it, the problem goes away.

[Moejoe90]

Any updates regarding this?

[donperi]

+1

[Stardog]

I get this warning. I am using ref on a Creatable to clear the inputValue after creating a new entry.

newOptionClick(value) {
  this.props.newOptionClick(value)
  this.tagSelect.current.select.setState({inputValue: ''})
}

render() {
return <Creatable
          ref={this.tagSelect}
          multi={true}
          options={this.props.tags}
          value={this.props.entryTags}
          onNewOptionClick={this.newOptionClick}/>
}

Using "innerRef" does not work. Anyone know of an alternate method?

[Cattari]

If someone needs a workaround - here it is. It worked perfectly for me.

Pass this function to children.

{props => ( <Select {...props} ref={ref => { props.ref(ref) selectNode = ref }} /> )}

[umphy]

I found that there is an extra level of indirection with a Creatable. So for the following code:

return (
	<Creatable
		ref={selectRef}
		...
	/>
)

In order to get to the actual select reference to clear a value, you will need (note the 2 select):

selectRef.current.select.select.clearValue()

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[AleksandrHovhannisyan]

I think the fact that multiple people reported this issue, without a fix ever being pushed, is an indication that "this issue is still relevant."

[bladey]

Thanks for the feedback @AleksandrHovhannisyan.

[AleksandrHovhannisyan]

Sorry for that little outburst, lol. I solved my issue using React.forwardRef (https://reactjs.org/docs/forwarding-refs.html).

[ebonow]

GIven the use of React.forwardRef and that these issues seem to reference v1.2 where as current version is v3.1.1, I think it would be fair to close this issue.

If there are any other objections, we can re-open but our intention is to close older issues to create greater transparency on what is left to stabilize and improve react-select and not to leave anyone feeling unsupported for closing out a 3yr old issue on a deprecated version.