选择多个输入反应不更新 Safari 移动版中的值

如何解决选择多个输入反应不更新 Safari 移动版中的值

所以，我发誓我有一个基于 <select multiple> 的 React 组件在上周之前在所有主要浏览器中都像魅力一样工作，但是在 iOS 更新到 14.5.1 之后，我发现它没有更新它的值在 Safari 移动版中。

我开始拆散部分以隔离问题，最终运行如下所示的基本测试，却发现这也不起作用！

const [val,setValue] = useState([])

const handleChange = (e) => {
    const values = [...val]
    if (values.length === 0) {
        values.push(e.target.value)
    } else {
        const refIndex = values.indexOf(e.target.value)
        if (refIndex === -1){
            // new value => select
            values.push(e.target.value)
        } else {
            // existing value => deselect
            values.splice(refIndex,1);
        }
    }
    setValue(values)
}

  

return(
    <>
        <select
            name={'myTest'}
            multiple value={val} onChange={e => handleChange(e)}>                 
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
        </select>
    </>
)

本质上，我按下 Safari 移动设备上的选择输入，它会打开我选择值的列表（选定的值有一个勾号）。在选择 (onChange) 时，每个值都应该被添加到状态数组中（或者如果之前被选中，则从它中删除）并且组件应该通过显示所选项目的总数来更新。相反，输入似乎没有“理解”从 <option> 输入的 <select> 部分中选择的值。

我认为这没有任何区别，但我正在使用 Nextjs @latest 开发我的应用程序。

我已经搜索了我能想到的所有内容并尝试了所有内容。也许我需要休息一下，因为我看不到明显的问题，或者 Safari 移动版确实存在一个非常烦人的问题。无论哪种方式，任何帮助都将不胜感激！