CODEWITHSUNDEEP
vue.jsquasar
Eduardo Sousa
Eduardo Sousa

Reputation: 1075

Always first filtered selected on Quasar Select

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.

Upvotes: 3

Views: 3738

Answers (2)

Eduardo Sousa
Eduardo Sousa

Reputation: 1075

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);
            });
    }

Upvotes: 4

Pratik Patel
Pratik Patel

Reputation: 6978

There is one option to achieve this is set model value in the filter method if filtered options length is >0.

filterFn (val, update, abort) {
  update(() => {
    const needle = val.toLowerCase()
    this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)

    if(this.options.length>0 && this.model!=''){
      this.model = this.options[0];
    }
  })
}

Codepen - https://codepen.io/Pratik__007/pen/QWjYoNo

Upvotes: 0

Related Questions