0

I'm having a tabindexing issue with Vue Select (https://vue-select.org/) in forms with Safari. I've created a simple form using Vue Select, and when I select an element from the list and then hit tab to the next element, with Safari (version 14.0.2), the focus jumps to the first element of the form. This works well with Chrome! Users will not accept this behavior, so I'm stuck.

here is a sample to reproduce the issue: 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;
            });
          });
    }    
  }
})

and here two animations that show the different behavior. In both cases, I click on the first selection (second element in the form) and then press tab for moving to the next one, and with Chrome it jumps to the next selection, while with Safari it jumps back to the first input element

chrome (correct behavior)

Chrome

Safari (wrong behavior)

enter image description here

Any thoughts on how this might be fixed?

thanks!

Marco Mirandola
  • 91
  • 1
  • 2
  • It may be good to add that you will notice this difference when you hit tab after you've selected the value. I think it is has to do with tabindex being handled differently across the two browsers. – Joshua Angnoe Jan 08 '21 at 08:58
  • thanks @JoshuaAngnoe, your right. it happens on hitting tab in order to move through the form. I've updated the description to reflect your comment. – Marco Mirandola Jan 08 '21 at 17:36

0 Answers0