IOS10 Safari浏览器中select唤起后，点击完成无法选择当前项目。

[larryspace]

Version

2.4.2

Reproduction link

https://jsfiddle.net/smpd16g0/

Steps to reproduce

<select v-model="value">
        <option v-for="item in options" :value="item.value">{{item.name}}</option>
</select>

{
    value: null,
    options: [
        {name: '男', value: 1},
        {name: '女', value: 2},
        {name: '其他', value: 3}
    ]
}

在IOS Safari中点击下拉框，此时默认会选中第一个，随后点击完成按钮，select框没有选择任何数据。

What is expected?

点击完成按钮后，第一项会选中。

What is actually happening?

点击完成按钮后，未选择任何数据。必须滑动到其他选项再回到第一项才能选中。

[fritx]

Just met the same thing today!

My workaround was:

<select v-model="value">
  <option v-for="item in options" :value="item.value" :disabled="item.disabled">
    {{item.name}}
  </option>
</select>

options.unshift({ name: '请选择', value: '', disabled: true })
// options.unshift({ name: 'pick one', value: '', disabled: true })

[yyx990803]

This is a iOS system issue and we can't do much in Vue core. You have 2 workarounds:

1. Add a hidden optgroup before options: <optgroup hidden="true" disabled></optgroup>

2. Make sure to initialize the select with a default value that has a matching option.