vueform / multiselect

Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
https://vueform.com
MIT License
807 stars 150 forks source link

Select option on TAB (or provide an onSelect config) #374

Open mfrascati opened 1 year ago

mfrascati commented 1 year ago

Description

Using the component as a select replacement can be quite frustrating while typing and pressing TAB, since even if i select an option with keys, when TAB is pressed the option is not selected.

It would be perfect if the option could be selected the same way it does when enter is pressed. Maybe an onSelect config could be used supporting tab|enter as values (the same way as addOptionOn does)

abaumg commented 6 months ago

As a workaround, you can implement a @keydown="onKeyDown" handler.

function onKeyDown(event: Event, instance: InstanceType<typeof Multiselect>) {
  if ((event as KeyboardEvent).key === "Tab" && instance.pointer !== null) {
    instance.select(instance.pointer);
  }
}