React-select not working on mobile browsers

Question

I am using React-Select on a form with Redux-Form. Everything works on desktop browsers (firefox and chrome). When I test on mobile the selected value does not show. The value is not passed to the SelectInput component

The code below is the SelectInput component:

const SelectInput = (props) => {
   const className = `field required ${props.meta.error && props.meta.touched ? 'error' : ''}`
  
    const handleBlur = () => {
      setTimeout(() => {
        const { input } = props;
        input.onBlur(input.value);
      }, 1);
    };  
    return (
      <div className={className}>
      
      <Select
          {...props}
   
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
         // onBlur={() => props.input.onBlur(props.input.value)}
        onBlur={handleBlur}
        options={props.options}
        styles={colourStyles}
        />
        <div>
          {renderError(props.meta)}
          </div>
      </div>
    
    )
  };
  export default SelectInput

this is how i use it on a form

      <span><b>Gênero</b></span><br></br>
      <Field
        name='genero'
        placeholder="Selecione uma opção"
        options={generos}
        value={genero}
        onChange={handleGeneroChange}
        component={SelectInput}
      />

React is version 16.13.1 React-select 3.1.0 Redux-form 8.3.6.

Does it happen on the desktop browser when you display the page in a mobile device width/height through developer tools? — Tasos Bu
I saw that redux-forms has an issue for mobile chrome, have you tried on other mobile browsers? github.com/JedWatson/react-select/issues/2692 — Tasos Bu
The problem happened on iphone with safari mobile and firefox — Kenio Carvalho

Kenio Carvalho Kenio Carvalho · Accepted Answer · 2020-09-30T08:41:02

The component below works on mobile and desktop browsers

const SelectInput = (props) => {

 const className = `field required ${props.meta.error && props.meta.touched ? 'error' : ''}`

  const handleBlur = () => {
    setTimeout(() => {
      const { input } = props;
      input.onBlur(input.value);
    }, 1);
  };  
  return (
    <div className={className}>
    <Select
        {...props}
      
      value = {props.options.filter(item=>item.value === props.input.value)[0]}
      onChange={value => props.input.onChange(value)}
      onBlur= { event => event.preventDefault()}
      options={props.options}
      styles={colourStyles}
      />
      <div>
        {renderError(props.meta)}
        </div>
    </div>
  )
};

React-select not working on mobile browsers

1 Answers