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

问题描述

我在Safari 的表单中遇到了 Vue Select ( https://vue-select.org/ ) 的标签索引问题。我使用 Vue Select 创建了一个简单的表单，当我从列表中选择一个元素，然后使用 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 会跳回第一个输入元素

铬（正确的行为）

Safari（错误行为）

关于如何解决这个问题的任何想法？

谢谢！

标签： vue.jssafarivue-select

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

问题描述

解决方案

推荐阅读