使用React Select的自定义验证消息

Question

I want to internationalize the form validation messages. I managed to do that for standard inputs using this solution . For React Select, though, it's behaving a little differently. Apparently , all that is needed is to override onChange and onInvalid inside an inputProps prop.

However, it seems that the embedded <input/> doesn't fire its onChange function when its value changes. That means that, once the Select is invalid, it never changes back to valid. Another thing that might be related is that the embedded <input/> 's value is null after an option is selected.

Here is a CodeSandbox that shows how far I've got. The first Select works as expected, but with the default validation message. The second Select have a custom message, but doesn't work as expected. The <input/> is there to show that onChange is not being called in the embedded <input/> .

Please let me know if it's possible to make it behave as expected.

Thanks in advance.

Answer 1

I managed to do something usable but, as I said in comments, it's not pretty. If that link goes dead, it involves setting required to true / false in order to try to make the message appear only once, and using setCustomValidity whenever the message inevitably appears.

I'll raise an issue in React Select because I think there has to be a better way, as it's shown in the example with pure <input/> .