React-select: on iOS it doesn't scroll to the Select element if touched it's in the bottom of the page

Created on 23 Oct 2016  路  2Comments  路  Source: JedWatson/react-select

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 img_1822
3- Select the State input
4- The focus doesn't scroll to the input
img_1823

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 ?

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.

All 2 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pashap picture pashap  路  3Comments

pgoldweic picture pgoldweic  路  3Comments

mbonaci picture mbonaci  路  3Comments

mjuopperi picture mjuopperi  路  3Comments

batusai513 picture batusai513  路  3Comments