title: Custom validation message with React Select
body: <p>I want to internationalize the form validation messages. I managed to do that for standard inputs using <a href="https://stackoverflow.com/a/22777141/1781376">this solution</a>. For React Select, though, it's behaving a little differently. <a href="https://github.com/JedWatson/react-select/issues/2149" rel="nofollow noreferrer">Apparently</a>, all that is needed is to override <code>onChange</code> and <code>onInvalid</code> inside an <code>inputProps</code> prop.</p>
  
  <p>However, it seems that the embedded <code>&lt;input/&gt;</code> doesn't fire its <code>onChange</code> function when its value changes. That means that, once the <code>Select</code> is invalid, it never changes back to valid. Another thing that might be related is that the embedded <code>&lt;input/&gt;</code>'s value is <code>null</code> after an option is selected.</p>
  
  <p><a href="https://codesandbox.io/s/rlo6rw3njn?module=%2Fsrc%2FHello.js" rel="nofollow noreferrer">Here</a> is a CodeSandbox that shows how far I've got. The first <code>Select</code> works as expected, but with the default validation message. The second <code>Select</code> have a custom message, but doesn't work as expected. The <code>&lt;input/&gt;</code> is there to show that <code>onChange</code> is not being called in the embedded <code>&lt;input/&gt;</code>.</p>
  
  <p>Please let me know if it's possible to make it behave as expected.</p>
  
  <p>Thanks in advance.</p>