Select does not scroll to selected item when the list is large

[jadrake75]

Version

• Vue version: 3

Description

When selecting an item in the select via the model when opened it will not scroll to the item. Depending on the application this will either happen on the first time or on subsequent openings (see example below). This makes is difficult when you have a table + form view and you are selecting a model that is populating the form but clicking the dropdown does not show the selected item. First discussed on Discord channel: https://discord.com/channels/787237947635793940/1171733876100583476/threads/1234957785075155035

Demo

https://stackblitz.com/edit/github-pnakzq-wwpvlc?file=src%2FApp.vue

[kentreez]

I solved it by using these

• open event (https://vueform.com/reference/multiselect-element#event-open)
• Method setPointer

Here is code of my custom component that using vueform/multiselect

const onOpen = (instance: InstanceType<typeof Multiselect>) => {
  if (model.value) {
    const option = props.options.find(o => {
      return o[props.valueAttribute] === model.value
    })
    if (option) {
      instance.setPointer(option);
    }
  }
}

[jadrake75]

Thanks @kentreez - so the code as you put didn't quite work since I think you might be using native=true and I am not sure what the "setPointer( )" call is (this is not listed in vueform) but.... I did come up with something that closely works (It does show the selected value)

Here is a link to my stackblitz showing it: https://stackblitz.com/edit/github-pnakzq-siyssl?file=src%2FApp.vue

Pseudo path.... I need to think a bit more on this (doesn't seem optimal) but

1. I find the item where the ID matches the model value (remember the items are objects with a rendered name and and ID value.
2. Next I get all the dropdown spans from the input
3. Check for the in the dropdown options (non-native is ul/li) where the name and innerText match
4. if a match is found, scrollIntoView (I had to put a tick in there for smoother performance)

  const onOpen = async (instance: SelectElement) => {
    if (instance && instance.items) {
      const option = (instance.items as Array<any>).find((o: any) => {
        return o.id === instance.data[$props.name || 'countryRef']
      })
      const values: Array<HTMLElement> = Array.from(
        instance.input.dropdown.querySelectorAll('span')
      )
      if (values) {
        const v = values.find((val: HTMLElement) => {
          return option.name === val.innerText
        })
        if (v) {
          await nextTick()
          v.scrollIntoView(true)
        }
      }
    }
  }

Again, I am just offering this here as a workaround. Ideally the control should just do the "right thing"