I know focus and ios mean nightmare. By the way, that's the use case:
1- Open the demo page http://jedwatson.github.io/react-select/
2- You get
3- Select the State input
4- The focus doesn't scroll to the input
I managed with an ugly workaround:
in React
...
onClick () {
this.refs.providerSelect.focus()
}
...
<div className="Select-wrapper" >
<Select ref="providerSelect"
name="provider"
options={[{label:'bla bla', value: 1}]}
autoBlur={true}
placeholder="Type to search"
/>
<button onClick={onClick} >Select...</button>
</div>
in CSS
/* iOS workaround to focus properly the Select */
.Select-wrapper {
position: relative;
button {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
Is something should be managed here https://github.com/JedWatson/react-select/blob/master/lib/Select.js#L368 ?
In case anyone else has this issue,
onFocus={()=>{document.activeElement.scrollIntoView()}}
worked for us. But YMMV based on what devices/versions exactly you need to support.
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.
Most helpful comment
In case anyone else has this issue,
onFocus={()=>{document.activeElement.scrollIntoView()}}worked for us. But YMMV based on what devices/versions exactly you need to support.