CODEWITHSUNDEEP
iosreactjsiphone
Andrew Latham
Andrew Latham

Reputation: 6132

React Select input zoom -- can't disable on iPhone XS

I have the following code for a React dropdown:

import Select from 'react-select';

const dropdownStyles = {
  control: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
  menu: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
}

...

<Select
  className="dropdown-select"
  styles={dropdownStyles}
  options={this.options()}
  defaultValue={this.options()[0]}
  onChange={selection =>
    this.setState({'type': selection.value})
  } />

On my iPhone XS, in both Chrome and Safari, it zooms in when I press the dropdown to select a value.

I have tried multiple different solutions to get rid of this, based on other StackOverflow answers. I've added a meta tag to the page header to prevent zooming. I've manipulated the fontSize passed in to ensure it's greater than 16px. I've added a CSS rule for .Select input to change the font-size. Nothing worked.

Is there something unique about iPhone XS that breaks the solutions that worked before?

Upvotes: 2

Views: 5227

Answers (3)

vijay
vijay

Reputation: 11

Try this

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

Upvotes: 1

Saurabh Sharma
Saurabh Sharma

Reputation: 2462

I've faced the similar problem with this scenario. If the font size you are using on react-select dropdown is < 16px then iOS will zoom to that input field. That is for accessibility reasons.

You can use something like this:

.dropdown-select__control.dropdown-select__control--is-focused {
    font-size: 16px !important;
}

and it should fix your problem.

Upvotes: 2

harish kumar
harish kumar

Reputation: 1759

Can you try using

@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .dropdown-select:focus, .dropdown-select .select__control input:focus {
     font-size: 1.8vh;
  }
}

Upvotes: 0

Related Questions