0

我在 Bootstrap 表中使用 Vue-Multiselect，与许多其他输入连续。当我在 Vue-Multiselect 中选择一个选项时，我希望我的标签顺序保持其在页面上的位置。但是，在 Safari 上，它会将选项卡位置重置为页面上的第一个元素。

考虑以下精简结构：

<template>
  <b-table-simple ref="simpleTable" id="table">

    <b-tbody>
      <b-tr id="table" v-for="(rowItem, index) in values" :key="rowItem.id">
        <b-td>
          <b-textarea type="text" :value="rowItem.firstValue"></b-textarea>
        </b-td>

        <b-td class="editable dropdown">
          <multiselect track-by="id" :label="selectLabel" :ref="column" :value="rowItem.multiSelectItem">
            <div v-if="rowItem.multiSelectItem">rowItem.multiSelectItem</div>
          </multiselect>
        </b-td>

        <b-td class="editable dropdown">
          <b-textarea type="text" :value="rowItem.value"></b-textarea>
        </b-td>
      </b-tr>
    </b-tbody>

  </b-table-simple>

</template>

<script>

import Vue from 'vue';
import {BootstrapVue, BTable} from 'bootstrap-vue';
import Multiselect from 'vue-multiselect';

Vue.use(BootstrapVue, BTable);

export default {
  components: {
    BootstrapVue,
    Multiselect,
    BTable
  },
  data() {
    return {
      values: {
        value: 'testData',
        firstValue: '',
        multiSelectItem: ['value1', 'value2', 'value3'],
      },
    }
  }
}
</script>

在 Chrome、Edge 和 Firefox 中，单击下拉菜单，然后按 Tab 键会将用户导航到行中的第三个文本框。但是在 Safari 中，按 Tab 键会将用户导航到行中的第一个框。我相信这是因为 Vue-multiselect 触发了一个模糊事件并导致 tab-index 重置到页面的开头。

Vue-multiselect 有没有办法正确维护 Safari 中的选项卡位置？否则，有没有办法在不打开下拉菜单的情况下专注于 Vue 多选输入？

4

0 回答 0