Warning on Input Component

[luciemac]

I am having a warning using ReactTags:

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Input)
    in div (created by Input)
    in Input (created by ReactTags)
    in div (created by ReactTags)
    in div (created by ReactTags)

From what is said here we should probably change https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78 by something like:
defaultValue={query}

What do you think?
Thanks!

[gustavohornig]

I'm having the same issue, any suggestions?

[i-like-robots]

I'm afraid I've not seen this myself, could you let me know which React version you are using?

[luciemac]

I'm using React 16.3.2

[estherleah]

@i-like-robots I am also getting this problem.

[chellman]

I added a PR to change to defaultValue, but if you want a hack that avoids the warning until this is fixed, you can add a noop method to your class that uses ReactTags and reference it as the onChange for your component. It's ugly, but it will stop the warnings.

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

[i-like-robots]

This is an interesting issue, it was discussed at length some years back in facebook/react#1118 (although I've never seen this warning, with any version of React including 16.3.2!)

There is nothing technically wrong with the current implementation but I agree warnings cluttering up the console are annoying and should be avoided.

I'm not sure that setting defaultValue is the right solution as it may have unintended consequences (see #139 (comment)) but there are potentially several other workarounds available.

[i-like-robots]

Looking into this some more I can see that this warning has 5 conditions:

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/ReactControlledValuePropTypes.js#L32-L46

It is the first condition which interests me because by default this should evaluate to true because the the default value for state.query is an empty string. This should therefore cause the function to return early and not output a warning.

Therefore to trigger this warning I had to change the default state (https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35) to make it a truthy value.

Do any of you who are experiencing have an example which demonstrates the issue so I can look more closely at it?