Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ld3nl opened this issue Nov 28, 2023 · 0 comments
Open

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

ld3nl opened this issue Nov 28, 2023 · 0 comments
Labels
3.0 bug

Comments

@ld3nl
Copy link

ld3nl commented Nov 28, 2023 •
edited
Loading

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/[email protected]/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/[email protected]/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.
@ld3nl ld3nl changed the title 🐛 Safari losing focus on current element once an option is selected, resetting focus to the first element 🐛 Safari Losing Focus on Current Element When 'Tab Key' is Used After Selecting an Option in Vue Multiselect Nov 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
3.0 bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ld3nl @mattelen