Vue-multiselect: Scroll to active option

[DominikAger]

Hello,

currently when i open the mulitselecet it shows the first entries in the list, to see more i have to scroll.

Ist there an Option that it scrolls to the active option in the list when i open the multiselect?

Thanks
Dominik

[ilyen85]

Hi @DominikAger

I might be late with this, but I wanted the same functionality to I came up with this:

/* 
 * Show the selected option after the options list is visible
 **/
showSelected() {
  let show_timeout
  /* have to wait some till the list is rendered */
  show_timeout = setTimeout(() => {
    /* the multiselect field */
    let the_field = this.$el
    /* the element that should be scrolled */
    let the_wrapper = the_field.querySelector('.multiselect__content-wrapper')
    /* the selected option */
    let the_option = the_field.querySelector('span.multiselect__option.multiselect__option--selected')
    /* if everything is present */
    if ((the_wrapper !== null) && (the_option !== null)) {
      /* get the selected option's scroll top position */
      let option_top_offset = the_option.offsetTop
      /* set the scroll top position of the wrapper element */
      the_wrapper.scrollTop = option_top_offset
    }
    clearTimeout(show_timeout)
  }, 10)
},

You can use it by adding a listener to the open event of vue-multiselect

<multiselect @open="showSelected"></multiselect>

it's working with the current version, but be aware that It might broke if the classnames are changed

[DominikAger]

@ilyen85 Thank you!