0

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.

GuiRitter
  • 697
  • 1
  • 11
  • 20
  • In your demo the message goes away for me (though it does come up when both options are selected after the first time) – Dominic May 22 '18 at 11:13
  • I did some more tests and it seems the message goes away only if the `Select`'s `onBlur` event fires before anything is typed in it. I also found out that using `Select`'s `onInputChange` makes it possible to remove the message after typing, but the default browser message comes back after further interactions. I'm trying to make it behave as expected, but it seems the result will be messy either way. – GuiRitter May 22 '18 at 11:51
  • [I got close](https://codesandbox.io/s/jvvpv2qy8w?module=%2Fsrc%2FHello.js). The message is more or less appearing only when I want it and the default message seems to not be appearing anymore. The only problem is that, even though `onOpen` is being called, it's not having effect, which should be to clear the input so the user can search for another option. – GuiRitter May 22 '18 at 14:37

1 Answers1

0

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/>.

GuiRitter
  • 697
  • 1
  • 11
  • 20
  • Updated the example. Now it's possible to disable validation. It's advised to wrap `Select` into another component in order to simply pass `required` as a prop in order to enable/disable validation. – GuiRitter May 23 '18 at 12:03