How to open select dropdown on hover using Bootstrap Vue

Question

I need a way to trigger <select> or <b-form-select> and show a dropdown list of options on mouseover. No use of JQuery or any external plugins other than Vue.js.

Answer 1

From my understanding, you want to show/hide <b-form-select> on the mouseover and mouseleave events. If so, I have some suggestions:

• Use a div as a wrapper, this will trigger the mouseover and mouseleave events. We can fire the mouse event directly by appending native to itself, but once hidden there is no way to restore the dropdown on mouseover again.
• You can simply show/hide the drop-down list via the v-show directive. We can easily set the value via mouse events.

Working Demonstration:

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      isVisible: true,
      options: [
        { value: null, text: 'Please select an option' },
        { value: 'a', text: 'This is First option' },
        { value: 'b', text: 'Selected Option' },
        { value: { C: '3PO' }, text: 'This is an option with object value' },
        { value: 'd', text: 'This one is disabled', disabled: true }
      ]
    }
  },
  methods: {
    onOver() {
      this.isVisible = true;
    },
    onLeave() {
      this.isVisible = false;
    }
  }
})

.wrapper-div {
  height: 20px;
}

sssccc
sssccc
[email protected]/dist/bootstrap-vue.css"/>