React-select: Required validation error placed on top of options

Created on 2 Jun 2017 · 5Comments · Source: JedWatson/react-select

When using the required attribute on the selectbox the validation error message is on top of the options menu when clicked. The message reshows after a click on the input field.
I would like to see the options menu placed over the error message.

Plunker: https://plnkr.co/edit/RxrQEX?p=preview
Default required selectbox behaviour: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

Source

1Jesper1

Most helpful comment

Hello @agirton, personally I use it because it's just giving the select component the required property of true. Maybe we can improve this behaviour?

1Jesper1 on 12 Jun 2017

👍2

All 5 comments

Hi @1Jesper1!

Thanks for reporting this issue!
I am afraid there is not a lot that can be done to improve the built-in browser form-validation (HTML5) in the Select code.
The validation message itself cannot be styled, see here

You can try to set the autosize prop on Select. This will affect the way the input element is rendered. The validation box may be displayed centered andno longer overlap your options.
You also could drop the HTML5 validation in favor of a scripted solution. Take a look at redux-form or react-redux-form.

Here is a link to a blog post about form validation in react.

Does this solves your problem with Select?

cbergmiller on 3 Jun 2017

👍1

Hello @cbergmiller , thanks for the advise. Unfortunately it seems setting the autosizeproperty does not affect the display. I'm interested why the validation error displays each time you click in the input field. There is no need to show it after clicking on the input field I think. This behaviour is not present in the default select required.

1Jesper1 on 7 Jun 2017

Hi @1Jesper1 it's most likely due to the way it's rendered. What's the main benefit of using HTML5 required? Even though it's a native feature, it lacks the ability to style so it's a suboptimal feature.

agirton on 9 Jun 2017

Hello @agirton, personally I use it because it's just giving the select component the required property of true. Maybe we can improve this behaviour?

1Jesper1 on 12 Jun 2017

👍2

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.