Always first filtered selected on Quasar Select

Question

I am using Quasar Framework and using the Q-Select with filter. I would like to the first filtered option always be already marked, because then if I hit enter, the first will selected.

Answer 1

After some research I found out how to achieve this in a generic way. The second parameter on the function update received at filterFn is the instance of QSelect itself.

Hence, we can use

ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);

To keep the focus on the first filtered element, regardless of multiselect or not.

The final code is something like

filterFn(val, update) {
        update(
            () => {
                const needle = val.toLocaleLowerCase();
                this.selectOptions = this.qSelectOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1);
            },
            ref => {

                ref.setOptionIndex(-1);
                ref.moveOptionSelection(1, true);
            });
    }