从 Vue Select 中选择时，Safari 表单失去输入焦点

问题描述

我在 Safari 的表单中遇到了 Vue Select (https://vue-select.org/) 的制表索引问题。我使用 Vue Select 创建了一个简单的表单，当我从列表中选择一个元素然后点击 Tab 键到下一个元素时，使用 Safari（版本 14.0.2），焦点跳转到表单的第一个元素。这适用于 Chrome！用户不会接受这种行为，所以我被卡住了。

这里是重现问题的示例：https://jsfiddle.net/mc5h1jf8/

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-select@latest"></script>
  </head>
  <body>
  <div id="app">
    <form>
      <input type="text">
      <v-select v-model="sel1" label="name" :options="options" :filterable="true" @open="onopen"></v-select>
      <v-select v-model="sel2" label="name" :options="options" :filterable="true" @open="onopen"></v-select>
    </form>
    </div>
  </body>
</html>

var mainApp = new Vue({
  el: '#app',data: {
        sel1: '',sel2: '',options: []
  },methods: {
    async onopen () {
        fetch('https://swapi.dev/api/people/')
        .then( response  => {
            response.json().then(data => {
                this.options = data.results;
            });
          });
    }    
  }
})

这里有两个显示不同行为的动画。在这两种情况下，我点击第一个选择（表单中的第二个元素），然后按 Tab 键移动到下一个，Chrome 会跳转到下一个选择，而 Safari 会跳回第一个输入元素

chrome（正确的行为）

Safari（错误行为）

对如何解决这个问题有任何想法吗？

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

safari vue-select vue.js

从 Vue Select 中选择时，Safari 表单失去输入焦点

问题描述

解决方法

相关问答