Trigger q-select with other keys aside from the default ENTER

[johnm]

I am using the q-select as an input field where users can enter values.

https://quasar.dev/vue-components/select#Create-new-values

Currently, the @new-value listener is triggered with using the ENTER key.

How can I modify so that it also listens to other keys such as tab or escape?

[metalsadman]

@johnm https://codepen.io/metalsadman/pen/jOMexgy

[johnm]

@metalsadman I’d like to rephrase a little bit. Given your codepen code, how can I let TAB trigger createValue? Currently, only ENTER can trigger that function.

My use case is I want to validate the value before calling done() or before adding the input value as a chip to the q-select.

https://codepen.io/metalsadman/pen/jOMexgy

[metalsadman]

@johnm was kind of already doing that in the tabAdd handler if(this.holder === '') return, tho you can make generic validator function that can call to validate both handler. ie.

function someValidator (val) {
 ...
 return 
}

tabKeyHandler() {
  if(!someValidator(holder)) return
  ...
},
newValueHandler(val, done) {
  if(!someValidator(val)) return
  ...
  done(...)
}

or just use one event listener, the tab one.