React-select: [v2] Mobile support

[AlessandroAnnini]

Hi,
I am using v 2.0.0-beta.6 but I noticed that it doesn't work on any chrome mobile.
Why is that?
Is it something you plan to fix?

Thanks!

[georapbox]

Hi @sun2rise
Do you happen to use Redux Form?
I'm asking because I had issues in mobile devices when using Redux Form while the library was working just fine when used alone.

[AlessandroAnnini]

yes @georapbox
i am using it with redux-form... did you solve this problem somehow?

[georapbox]

My main issue on mobile was that the options were not selectable at all while it was working properly on desktop. In my component I had these 2 properties that were mentionned in redux-form related issues:

onChange={input.onChange}
onBlur={input.onBlur(input.value)}

But even having added these props, the issue still existed. I finally found that the issue was due to this property blurInputOnSelect which is true by default in mobile devices. So, when the user selects an option the library triggers a blur event. So far the only solution I found working is to replace onBlur={input.onBlur(input.value)} with onBlur={event => event.preventDefault()}.

Here a full example of how my component looks like:

// SelectSingle

const SelectSingle = field => {
  const { input, options } = field;

  return (
    <Select
      {...input}
      value={options.filter(item => item.value === input.value)[0]}
      options={options}
      onChange={input.onChange}
      onBlur={event => event.preventDefault()}
    />
  );
};


// Field component

<Field  
  name="language"
  component={SelectSingle}
  options={optionsArray}
/> 

PS Another partial solution is to set blurInputOnSelect to false. But then the virtual keyboard is not dismissed when user selects an option.

Hope this helps; let me know if that worked for you!

[AlessandroAnnini]

Thanks @georapbox your solution is working great!!

[DimaRomaniuk]

I want help developers who work with reduxForm
onBlur={event => event.preventDefault()}
doesn't work because reduxForm onBlur triggered errors for this field
It's my solution:
```export class FormSelect extends Component {
constructor() {
this.fixReactSelectBlurMobile
}

handleChange = (value) => {
this.fixReactSelectBlurMobile = value
this.props.onChange && this.props.onChange(value, { ...this.props })
}

handleBlur = () => {
this.props.onBlur && this.props.onBlur(this.fixReactSelectBlurMobile, { ...this.props })
}

render() {
return (
onBlur={this.handleBlur}
onChange={this.handleChange}
/>
)
}
}

[georapbox]

@DimaRomaniuk what kind of errors does reduxForm throw? I just tested my implementation using react-select v2.0.0 and v2.1.1 and I don't see any errors thrown. Actually after v2.0.0 was released I stopped having issues with selecting options in mobile (Android) even if I don't use onBlur={event => event.preventDefault()}.

[DimaRomaniuk]

@georapbox reduxForm throw own errors for validation form

[DarkKnight1992]

My main issue on mobile was that the options were not selectable at all while it was working properly on desktop. In my component I had these 2 properties that were mentionned in redux-form related issues:

onChange={input.onChange}
onBlur={input.onBlur(input.value)}

But even having added these props, the issue still existed. I finally found that the issue was due to this property blurInputOnSelect which is true by default in mobile devices. So, when the user selects an option the library triggers a blur event. So far the only solution I found working is to replace onBlur={input.onBlur(input.value)} with onBlur={event => event.preventDefault()}.

Here a full example of how my component looks like:

// SelectSingle

const SelectSingle = field => {
  const { input, options } = field;

  return (
    <Select
      {...input}
      value={options.filter(item => item.value === input.value)[0]}
      options={options}
      onChange={input.onChange}
      onBlur={event => event.preventDefault()}
    />
  );
};


// Field component

<Field  
  name="language"
  component={SelectSingle}
  options={optionsArray}
/> 

PS Another partial solution is to set blurInputOnSelect to false. But then the virtual keyboard is not dismissed when user selects an option.

Hope this helps; let me know if that worked for you!

saved my day

[acollazomayer]

I just updated the library and is not working for me with redux form

[sandeepsk2020]

I have same issue in Mobile (redux form)
onClick drop down appears and disappears.

[heshammourad]

I needed the redux-form meta fields (specifically touched) to be properly updated with react-select and ran into the same issue. Calling event.preventDefault() causes the redux-form blur action not to get dispatched:

A callback that will be called whenever an onBlur event is fired from the underlying input. If you call event.preventDefault(), the BLUR action will NOT be dispatched, and the value and focus state will not be updated in the Redux store.

I was able to build on top of @georapbox's solution to solve it by calling redux-form's onBlur function with no arguments. This will allow redux-form to dispatch a blur action without changing the value back to blank on mobile.

const ReduxFormSelect = ({ input, options }) => (
  <Select
    onBlur={() => {
      input.onBlur();
    }}
    onChange={(option) => {
      onChange(option.value);
    }}
    onFocus={() => {
      input.onFocus();
    }}
    options={options}
    value={options.find(option => option.value === input.value)}
  />
);

[Alizwell]

Hi, I am using v 2.3.0 but I found that the select option can't be selected on chrome dev tool with mobile version.
I try to use onBlur={event => event.preventDefault()} and update my react-select package to version 3.0.0, but it doesn't work either.
Why is that? It's there any workaround to fix it?Thanks!

[phil-andrews]

In your redux-form Field component prevent default onBlur from happening. This has resolved my mobile issue when using this library with redux-forms on mobile
```
...
onBlur={(e: any) => e.preventDefault()}
/>

[johnedelmapa]

My main issue on mobile was that the options were not selectable at all while it was working properly on desktop. In my component I had these 2 properties that were mentionned in redux-form related issues:

onChange={input.onChange}
onBlur={input.onBlur(input.value)}

But even having added these props, the issue still existed. I finally found that the issue was due to this property blurInputOnSelect which is true by default in mobile devices. So, when the user selects an option the library triggers a blur event. So far the only solution I found working is to replace onBlur={input.onBlur(input.value)} with onBlur={event => event.preventDefault()}.

Here a full example of how my component looks like:

// SelectSingle

const SelectSingle = field => {
  const { input, options } = field;

  return (
    <Select
      {...input}
      value={options.filter(item => item.value === input.value)[0]}
      options={options}
      onChange={input.onChange}
      onBlur={event => event.preventDefault()}
    />
  );
};


// Field component

<Field  
  name="language"
  component={SelectSingle}
  options={optionsArray}
/> 

PS Another partial solution is to set blurInputOnSelect to false. But then the virtual keyboard is not dismissed when user selects an option.

Hope this helps; let me know if that worked for you!

Thank you so much. I was stuck for this for weeks

[bladey]

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 efforts towards the current major 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!

[jayashree-navsoft]

Thanks @georapbox your solution is working great!!