Select Dropdown Input control for ReactJS doesn't show value on the iPhone

Question

I have a problem with the iOS operating system (iPhone). Select dropdown input control for ReactJS doesn't show value on the iPhone. Webpage and Android are no problems. Below are my coding:

const [durationHour, setDurationHour] = useState("0");
var getDurationHour = propApptData.duration / 60;
var intDurationHour = ~~getDurationHour;
setDurationHour(intDurationHour);
<Col lg="2">
<Form.Group>
  <Form.Label>
    <FormattedMessage id="GENERAL.DURATION" />
  </Form.Label>
  <Form.Control
    as="select"
    name="duration"
    value={durationHour}
    onChange={(e) => setDurationHour(e.target.value)}
  >
    <option value="0" label="0" />
    <option value="1" label="1" />
    <option value="2" label="2" />
    <option value="3" label="3" />
    <option value="4" label="4" />
    <option value="5" label="5" />
    <option value="6" label="6" />
    <option value="7" label="7" />
    <option value="8" label="8" />
    <option value="9" label="9" />
    <option value="10" label="10" />
    <option value="11" label="11" />
    <option value="12" label="12" />
  </Form.Control>
</Form.Group>
</Col>

The iPhone results show like below (ERRORS):

The Android phone results show like below (CORRECT):

The Webpage results show like below (CORRECT):

May I know need to use another select input bootstrap to replace the current one? If replace the current one, which bootstrap is compatible with iOS? Or do you all have good solutions to solve these iPhone issues on select input? I hope someone can guide me on how to solve this problem. Thanks.

score 0 · Answer 1 · edited Jun 09 '23 at 09:50

The problem you are facing is that iOS doesn't support tag options that way.

iOS 10+

let option = document.createElement('option');
// option.innerText required on iOS 10 and up.
option.label = option.innerText = 'My option label';
option.value = '123';

iOS 7-9

var option = document.createElement('option');
// option.innerText not required on iOS 7-9.
option.label = 'My option label';
option.value = '123';

It should be like

<Form.Control
    as="select"
    name="duration"
    value={durationHour}
    onChange={(e) => setDurationHour(e.target.value)}
  >
    <option value="0">0</options>
    <option value="1">1</options>
    <option value="2">2</options>
    <option value="3">3</options>
    <option value="4">4</options>
    <option value="5">5</options>
    <option value="6">6</options>
    <option value="7">7</options>
    <option value="8">8</options>
    <option value="9">9</options>
    <option value="10">10</options>
    <option value="11">11</options>
    <option value="12">12</options>
  </Form.Control>

Select Dropdown Input control for ReactJS doesn't show value on the iPhone

1 Answers1