How to focus the selected element on open?

[andorfermichael]

It would be very helpful if the selected option would be focused on when the dropdown is opened. It always focuses on the first element but, if you have a very long list, then it can be very uncomfortable to go to the selected option again. A use case would be if you navigate with the arrow keys and use the select field to load data, then you simply want to go to the next option via arrow keys.

[andorfermichael]

It seems that

select$.setPointer(value)

e.g.

function onOpen(select$: any) {
    // Focus selected element
    select$.setPointer(value)
}

solved it.

[andorfermichael]

However, it seems there is a bug. If I use keyboard only it works as expected, but if I select a value with mouse first and reopen and select with keyboard and reopen the wrong element is focused.

[adamberecz]

You should use:

onOpen(select$) {
  select$.setPointer(select$.getOption(this.multiselectModelValue))
}

With this I can't reproduce the issue you describe.

[andorfermichael]

For me, it still does not work (using select$.setPointer(select$.getOption(this.multiselectModelValue))). If I use the mouse, and reopen it, the pointer is always set to the "first" selected one, even if I set another one as selected via enter key.

I have the feeling that there are two different behaviors:

• Using arrow keys the next/previous one of the selected is highlighted.
• Using the mouse (open via mouse) the selected is highlighted.

If the mouse and arrow are mixed it is mixed up somehow.

[adamberecz]

Closing this because it's not reproducible. If you want to reopen please do a screencast and copy the exact Multiselect config or create a fiddle example with exact steps to reproduce.