Clicking on the `label` won't focus the `Multiselect` component unless it's searchable

[mrleblanc101]

Version

• Vue version: 3

Description

Clicking on the label won't focus the Multiselect component unless it's searchable.
If it's searchable, it will put the focus (and text cursor) in the search field, which is the correct behavior.
But if it's not searchable, clicking on the label should focus the component so that it can be opened using the spacebar like a native select.

Here is a GIF:

Demo

https://jsfiddle.net/mrleblanc101/vfmg2h4a/5/

[mrleblanc101]

Added the jsfiddle

[MarcinSufa]

@mrleblanc101

multiselect is missing input element when props
autocomplete=false or
autocomplete=true && searchable=false
so label will only work when where is input element in multiselect

solution :

• for not input element add click event on label,
• add tabindex=-1 to multiselect ( there is div instead of input so it needs to be tabable )
• use focus function when needed

<script setup lang=ts>
// ...
const input = ref();
const instance = getCurrentInstance();
const componentId = computed(() => props.id || `select-${instance?.uid}`);


const multiselectHasInputElement = computed(() => {
  return props.autocomplete && props.searchable;
});

const addTabIndexOnDivInstance = computed(() => {
  return multiselectHasInputElement.value ? undefined : -1;
});

const focusOnElement = () => {
  if (multiselectHasInputElement.value) {
    return;
  }
  input.value?.$el?.focus();
}

</script>

<template>
  <label :for="componentId" @click="focusOnElement" > label </label>
  <Multiselect
    ref="input"
    :id="componentId"
    :tabindex="addTabIndexOnDivInstance"
    //...
  />

</template>