Component is used as uncontrolled instead of controlled

[chris-verclytte]

Hi,

I had some troubles trying to use the component as controlled. My use case is quite simple : I want to use the component on mobile and to only allow numbers to be entered by using a 'numeric' dynamic keyboard. After trying all mixes of type, inputMode and pattern. I finally realized that no one would work (here is a demo) for a number password and that the correct combination to implement this would be to put type="tel" (to properly display a keyboard with only numbers) and to use a class to set -webkit-text-security: disc in order to hide the password.

But then, the resulting HTML will no longer filter key for the numeric constraint. I decided to handle it myself by filtering code on change by simply calling an HOC when the code matches [0-9]* regex. The problem is that the component finally ignore the value passed in props but uses its local state. Then value prop and local state goes out of sync.

I think this is falling in the anti-patterns that React team describe in this blog post: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state

[ShonP]

+1

[kembala]

+1

[lvillacin]

+1