shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.69k stars 988 forks source link

🐛 Safari Losing Focus on Current Element When 'Tab Key' is Used After Selecting an Option in Vue Multiselect #1733

Open ld3nl opened 10 months ago

ld3nl commented 10 months ago

Browser Version

Safari Version 16.2 (18614.3.7.1.5)

Description

In Safari, when interacting with a Vue Multiselect dropdown, the browser's focus behavior is inconsistent after using the 'tab key'. After selecting an option from a dropdown and pressing the 'tab key', the focus is unexpectedly reset to the first element in the form rather than moving to the next logical element.

Reproduction Link

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Multiselect Example</title>
  <!-- Include Vue Multiselect CSS -->
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@3.0.0-beta.3/dist/vue-multiselect.css">
</head>
<body>
  <div id="app">
    <vue-multiselect
      v-for="index in 3"
      :key="index"
      :options="options.map(option => option.name)"
      v-model="selected[index]">
    </vue-multiselect>
  </div>

  <!-- Include Vue and Vue Multiselect JS -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-multiselect@3.0.0-beta.3/dist/vue-multiselect.umd.min.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          selected: ['Option 1', 'Option 1', 'Option 1'],
          options: [
            { name: 'Option 1' },
            { name: 'Option 2' },
            { name: 'Option 3' }
            // More options can be added here
          ]
        };
      }
    }).component('vue-multiselect', window['vue-multiselect'].default)
      .mount('#app');
  </script>
</body>
</html>

Steps to reproduce

  1. Click on any Vue Multiselect dropdown.
  2. Select an option from the dropdown.
  3. Press the 'tab key' to move to the next form element.
  4. Observe that the focus is reset to the first element in the form instead of the next element.

Expected Behaviour

After selecting an option from the Vue Multiselect dropdown and pressing the 'tab key', the focus should move to the next logical element in the form.

Actual Behaviour

After selecting an option and pressing the 'tab key', the focus resets to the first element of the form, disrupting the expected tab order and navigation flow.

Additional Information

This issue appears to be specific to Safari and does not occur in other browsers like Chrome or Firefox.