Focus sur un select2

arnich
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'utilise VueJs et j'aimerais faire fonctionner select2 avec.
Dans l'ensemble cela marche. Mais un petit détail me chagrine

Partie HTML

<div id="app">
    {{ data1 }} - {{ selected }}<br>
    <input v-model='data1' type='text'>
    <select v-select="selected" :options="options">
      <option value="0">default</option>
    </select>
</div>

Code JS

Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],

  bind: function () {
    var self = this
    $(this.el)
      .select2({
        data: this.params.options,
        maximumSelectionLength: 1
      })
      .on('change', function () {
        self.set(this.value)
      })
  },
  update: function (value) {
    $(this.el).val(value).trigger('change')
  },
  unbind: function () {
    $(this.el).off().select2('destroy')
  }
});

new Vue({
    el: '#app',
    data: {
            data1 : 'Toto',
        selected: 0,
        options: [
          { id: 1, text: 'hello' },
          { id: 2, text: 'what' }
        ]
    }
})

Ce que je veux

Quand on tabule du premier input vers le second je veux pouvoir directement saisir pour effectuer ma recherche dans la liste déroulante

Ce que j'obtiens

Lorsque je tabule je ne peux pas saisir. Je peux saisir si j'utilise la souris pour mettre le focus sur mon select.

PS : Je suis ouvert a autre chose que select2 si vous avez mieux.

Aucune réponse