React-select: HTML 5 required validation not working when searchable is set to false

Created on 26 Jun 2017 · 7Comments · Source: JedWatson/react-select

react-select require validation has issue with searchable option:

when searchable set to true. It is working fine. but when searchable set to false it is not validating html 5 require validation.

Here is plunker link where i had regenerate issue
https://plnkr.co/edit/y7udXxoN2mFMXF5GOZhY?p=preview

in plunker script.jsx file please test it by changing value of searchable attribute.
if you make it true it will show default browser html5 validation popup
and if you make it false it will not validate.

Thanks

Source

jariwalabhavesh

Most helpful comment

I ran into the same issue. I used the work-around from #1397 by @Ryanthegiantlion: wrapping the select component with a sibling input with zero height, width, and opacity and assigned the required prop to that input (as well as autoComplete). It seems like the solution within the library would be a similar hidden input, but this was sufficient for my immediate needs.

<div className={className}>
    <Select {...props}></Select>
    <input
        tabIndex={-1}
        autoComplete={props.autoComplete}
        value={props.value}
        required={props.required}
        onChange={e => props.onChange({value: e.target.value})}
    ></input>
</div>

benkahle on 20 Jul 2017

👍8 😕5 ❤2 🎉2

All 7 comments

same here, do you have updates about this?

optyler on 18 Jul 2017

@optyler
No any update or feedback on this issue :-(

jariwalabhavesh on 18 Jul 2017

<div className={className}>
    <Select {...props}></Select>
    <input
        tabIndex={-1}
        autoComplete={props.autoComplete}
        value={props.value}
        required={props.required}
        onChange={e => props.onChange({value: e.target.value})}
    ></input>
</div>

benkahle on 20 Jul 2017

👍8 😕5 ❤2 🎉2

I just got the same issue, any progress on this ?

gregaubert on 23 Jan 2018

I just got as well the same issue, any update on this ?

AnnaBazmajyan on 23 Jul 2018

Still having this issue as well. I used @benkahle 's workaround with a little adjustment below. If you tried to submit the form, the hidden input would focus and would mess when using a ReactSelectAsync. Changing the focus when focusing the hidden element did the trick.

Not the best solution, but works until we get an update.

<div className={className}>
    <Select
      ref={(ref) => { this.select = ref; }}
      {...props}
    />
    <input
        tabIndex={-1}
        autoComplete={props.autoComplete}
        value={props.value}
        required={props.required}
        onChange={props.onChange}
        style={{
            opacity: 0,
            width: 0,
            height: 0,
            position: 'absolute',
          }}
        onFocus={() => this.select.focus()}
    />
</div>

brunocramos on 31 Jul 2018

👍4

Hello -

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

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 aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue 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!