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

Question

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?

maybe try different meta tags from [here](https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page)? I mean are you sure you have the correct meta tag? — tanmay, Jul 04 '20 at 17:35
Yeah neither nor the version with user-scalable set to 0 did anything. — Andrew Latham, Jul 04 '20 at 17:55

score 1 · Answer 1 · answered Jul 10 '20 at 04:21

1

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.

answered Jul 10 '20 at 04:21

Saurabh Sharma

2,422
4
20
41

It worked for me! Thanks. – Rogerson Nazário Feb 04 '22 at 17:51

score 1 · Answer 2 · answered Sep 04 '22 at 15:37

1

Try this

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

answered Sep 04 '22 at 15:37

vijay

11
2

This is already mentioned in the question, but thanks for spelling it out. Do you have an iPhone XS and were able to fix the problem with it? – cachius Sep 09 '22 at 01:26

score 0 · Answer 3 · answered Jul 09 '20 at 20:36

0

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;
  }
}

answered Jul 09 '20 at 20:36

harish kumar

1,732
1
10
21

Can you check `react-select` website on your device. Check if the dropdown there is also zooming up on your phone? – harish kumar Jul 11 '20 at 05:21
Those examples do not have the issue. – Andrew Latham Jul 13 '20 at 15:43
I'm also using `react-select` and `` this inside `` of index.html woked for me – harish kumar Jul 13 '20 at 16:32
Can you check if the meta tag is there, after building the bundle. i.e `build` folder – harish kumar Jul 13 '20 at 16:34

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

3 Answers3