Highlight first selected option on multiselect open

[plashenkov]

Hello!

Is it possible to move a highlight (pointer) to the currently selected option?

Current behavior: for example, we have a multiselect component with ability to select only one option. And some option is selected in it. When I open the component, the very first option is highlighted (pointer points to the very first option). If I move my mouse over other options, they are highlighted. Then, if I close the component and open it again, the pointer remains in the position from the previous open action.

Is there a way to make pointer move to the selected option when a user opens multiselect component? This is the default behaviour for system dropdown components. Select2 uses this behaviour as well (please take a look here: https://select2.org/getting-started/basic-usage).

Maybe to add some property to turn on this behavior? Or maybe some workaround to manually (using JS) move the pointer to a selected option when user opens the component?

(If there are multiple options are selected, then we can highlight the first of them).

[shentao]

That would be a really nice addition. :)

[dvatp]

+1. Have been using vue-multiselect in a project for a couple months and I finally recognized this behavior, which is highly undesirable as it makes the menu function in a manner counter to the default select menus in all browsers I have seen, and that promises to confuse / annoy users.

To be more specific: I have in some cases long options lists and I don't want to force the user to scroll all the way from the beginning of the list to reach a menu option adjacent to that currently selected just to correct an inadvertent selection error.

I suggest this be implemented as a configuration option like "point to first selected option". That way it will work for single and multiple-select scenarios.

[shentao]

Yeah, I think it would be great to have this improvement in the 2.0 version as well.

[acdc123]

Will this be part of any release before 3.0?

[shentao]

If you provide a PR!

[trutherford2388]

My issue is similar, but not quite the same. I am using it as a search field and it opens with a list. The problem I have is that if I move the cursor over 1 option in the middle of the list and then out of the list and start typing again when the cursor is no longer in the list, I should see the highlighted field in the list reset to the first option, but instead it remains highlighted on the option that I moved the mouse over. What I would prefer to see is a way to manually reset the focused item in the list as soon as I start typing again to the first option or at least have the multiselect automatically reset to the first option.

V/R Travis L. Rutherford

[voltuer]

almost a year later, any news on this? it's the default behavior on browser native selects, would be nice to have

[shentao]

@sebolio still on my list for the v3. It’s now getting pretty close to release (some a11y improvements are still in development see https://github.com/shentao/vue-multiselect/pull/1284). If you would like to provide a PR to v3 branch with this feature, I would happily merge it.

[voltuer]

thanks for the reply, @shentao I tried to give it a look but couldn't figure out where it happens. I realized that it highlights the last item you hovered your mouse on, and the first one if you open it for the first time.

[sigier]

I fixed this issue with setting of index for the pointer: this.$refs['your-multiselect-element-ref-id'].pointer = 0

[rickus123]

For anyone who runs across this all these years later, I have come up with a workaround to this problem. I am specifically using the vue-multiselect in single-select mode coupled with the ability to search and optionally add a new element to the options.

It involves running some code after the 'opened' event. This code will set the multiselect's pointer to the index of the selected value, then scroll to the selected element to put that option in view. Due to some reactivity conflict, I had to start by scrolling to position 0 before scrolling to the selected element. Without this, the code only worked every other time the widget is opened.

Finally, I had to put this all inside a $nextTick because of some unidentified timing issue when an element is added to the options.

The word 'broker' here is specific to my application. That can be changed to suit your own needs.

    opened() {
        // Undesired behavior of multiselect component does NOT display current selection when widget is opened.
        // This code will overcome that behavior by forcing a 'scrollToTop' action on the current selection.
        // But do the nature of the component (probably because of reactivity conflicts with the scrollToTop call), the 
        // element must be scrolled to top of list prior to scrolling to selection.
        this.$nextTick(() => {
            $('.broker-multiselect .multiselect__content-wrapper').scrollTop(0);    // scroll to top of list 1st
            if (!this.value) {
                return;
            }
            const pointer = _.findIndex(this.brokerOptions, e => e.id == this.value);
            // reset the component's pointer to the index of the selected value
            this.$refs.brokerselect.pointer = pointer;
            // scroll to to using the position().top of the selected element
            const selectedtop = $('.broker-multiselect .multiselect__content .multiselect__element .multiselect__option--selected').position().top;
            $('.broker-multiselect .multiselect__content-wrapper').scrollTop(selectedtop);
        });
    },