Bug: Controlled `<select>` form cannot enforce the specified "value" on iPad.

[babatakao]

React version: 18

Steps To Reproduce

1. Open https://playcode.io/1737391 on iPad (not iPhone) Safari. I've confirmed on iPadOS 16.4.
2. Select "No1" from the select box. An alert is shown and the select box is kept to be "Please select".
3. Select "No1" again.

Link to code example:

https://playcode.io/1737391

import React from 'react';

export function App(props) {
  return (
    <select value="-1" onChange={(ev) => { alert(ev.target.selectedIndex) }}>
      <option value="-1">Please select</option>
      <option value="1">No1</option>
      <option value="2">No2</option>
      <option value="3">No3</option>
    </select>
  );
}

The current behavior

After the step 3, the select box will be changed to "No1".

The expected behavior

The select box should be kept to "Please select".

Other browsers other than iPad (e.g. iPhone Safari, Windows Chrome and mac Safari works well. This issue is reproduced only on iPad.

[Hudsxn]

The use of alert is blocking in javascript, so depending on how that browser handles thread blocking will be a main factor in this. considering this is isolated to a single browser on a specific device, this may be down to the browser vendor rather than React. Have you tried testing this in native HTML to see if you achieve the same issue.

If this is reproducible using HTML alone, then this is a browser issue. However, in the meantime you can simply work around this by :

export function App(props) {
    const [selectValue, setSelectValue] = useState('-1');
    return (
        <select 
               defaultValue={selectValue} 
               onChange={(ev) => {
                     setSelectValue(ev.target.value);
                     // do something with `selectValue`
               }}
         >...</select>
    )
}

[babatakao]

The use of alert is blocking in javascript, so depending on how that browser handles thread blocking will be a main factor in this.

alert is just for confirmability. The issue also occurs even if the alert is removed.

Have you tried testing this in native HTML to see if you achieve the same issue.

I agree that this is a browser bug. I've noticed that iPad Safari seems not apply the new value set by JS until the select loses focus. I've just reported to apple: https://bugs.webkit.org/show_bug.cgi?id=268273

Is working around browser bugs is out of scope? If so, feel free to close the issue.

However, in the meantime you can simply work around this by :

Thank you for the suggestion. But what I want to do is create a select form which always has the default value. Anyway I will work around by using blur() just now.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!