fix(VAutocomplete/VCombobox): click in empty space should not close menu

[J-Sek]

• prevents blur on input to close menu when click lands on empty space in menu-header or menu-footer
• attempt to align VAutocomplete/VCombobox with VSelect
• (regression?) clicking on the list scrollbar triggers validation
  • all other interactions are basically the same, but it would be nice to suppress validation as long as menu is open

Markup:

<script lang="ts" setup>
  import { shallowRef, watch } from 'vue'

  const headerEnabled = shallowRef(true)
  const footerEnabled = shallowRef(true)
  const forceNoData = shallowRef(false)

  const menu1 = shallowRef(false)
  const menu2 = shallowRef(false)
  const menu3 = shallowRef(false)

  const multiple = shallowRef(false)

  const selectValue = shallowRef(null)
  const autocompleteValue = shallowRef(null)
  const comboboxValue = shallowRef(null)

  watch(multiple, v => {
    selectValue.value = v ? [] : null
    autocompleteValue.value = v ? [] : null
    comboboxValue.value = v ? [] : null
  })

  const items = Array.from({ length: 50 }, (_, i) => ({ id: i, value: `Item ${i + 1}` }))

  const rules = [(v: unknown[]) => v !== null || 'Required']
</script>

<template>
  <v-app theme="dark">
    <v-container max-width="800">
      <v-toolbar class="mb-6 rounded">
        <div class="d-flex ga-6 justify-center w-100">
          <v-switch v-model="multiple" label="multiple" hide-details />
          <v-switch v-model="headerEnabled" label="menu-header" hide-details />
          <v-switch v-model="footerEnabled" label="menu-footer" hide-details />
          <v-switch v-model="forceNoData" label="no-data" hide-details />
        </div>
      </v-toolbar>

      <v-row>
        <v-col cols="4">
          <h3 class="text-h6 mb-2">VSelect</h3>
          <v-select
            v-model="selectValue"
            v-model:menu="menu1"
            :chips="multiple"
            :closable-chips="multiple"
            :items="forceNoData ? [] : items"
            :multiple="multiple"
            :rules="rules"
            item-title="value"
            item-value="id"
            label="Select with menu-header/menu-footer"
            clearable
          >
            <template v-if="headerEnabled" #menu-header="{ search }">
              <div class="pa-2 border-b">
                <v-text-field
                  v-model="search.value"
                  append-inner-icon="$close"
                  density="compact"
                  placeholder="Search..."
                  prepend-inner-icon="mdi-magnify"
                  hide-details
                  @click:append-inner="menu1 = false"
                />
              </div>
            </template>
            <template v-if="footerEnabled" #menu-footer>
              <div class="d-flex justify-space-between pa-2 border-t">
                <v-btn text="Clear" variant="text" @click="selectValue = []" />
                <v-btn text="Done" variant="tonal" @click="menu1 = false" />
              </div>
            </template>
          </v-select>
        </v-col>

        <v-col cols="4">
          <h3 class="text-h6 mb-2">VAutocomplete</h3>
          <v-autocomplete
            v-model="autocompleteValue"
            v-model:menu="menu2"
            :chips="multiple"
            :closable-chips="multiple"
            :items="forceNoData ? [] : items"
            :multiple="multiple"
            :rules="rules"
            item-title="value"
            item-value="id"
            label="Autocomplete with menu-header/menu-footer"
            clearable
          >
            <template v-if="headerEnabled" #menu-header="{ search }">
              <div class="pa-2 border-b">
                <v-text-field
                  v-model="search.value"
                  append-inner-icon="$close"
                  density="compact"
                  placeholder="Search..."
                  prepend-inner-icon="mdi-magnify"
                  hide-details
                  @click:append-inner="menu2 = false"
                />
              </div>
            </template>
            <template v-if="footerEnabled" #menu-footer>
              <div class="d-flex justify-space-between pa-2 border-t">
                <v-btn text="Clear" variant="text" @click="autocompleteValue = []" />
                <v-btn text="Done" variant="tonal" @click="menu2 = false" />
              </div>
            </template>
          </v-autocomplete>
        </v-col>

        <v-col cols="4">
          <h3 class="text-h6 mb-2">VCombobox</h3>
          <v-combobox
            v-model="comboboxValue"
            v-model:menu="menu3"
            :chips="multiple"
            :closable-chips="multiple"
            :items="forceNoData ? [] : items"
            :multiple="multiple"
            :rules="rules"
            item-title="value"
            item-value="id"
            label="Combobox with menu-header/menu-footer"
            clearable
          >
            <template v-if="headerEnabled" #menu-header="{ search }">
              <div class="pa-2 border-b">
                <v-text-field
                  v-model="search.value"
                  append-inner-icon="$close"
                  density="compact"
                  placeholder="Search..."
                  prepend-inner-icon="mdi-magnify"
                  hide-details
                  @click:append-inner="menu3 = false"
                />
              </div>
            </template>
            <template v-if="footerEnabled" #menu-footer>
              <div class="d-flex justify-space-between pa-2 border-t">
                <v-btn text="Clear" variant="text" @click="comboboxValue = []" />
                <v-btn text="Done" variant="tonal" @click="menu3 = false" />
              </div>
            </template>
          </v-combobox>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>