Bug: Controlled `<select>` form cannot enforce the specified "value" on iPad. about react HOT 4 CLOSED

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.

from react.

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

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!

from react.

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!

from react.