fix(VSelects): no closable chips when readonly or disabled

[Haviles04]

Description

fixes #22349

Markup:

<template>
  <v-app>
    <v-container>
      <h1>v-form[readonly] v-autocomplete</h1>
      <v-form readonly>
        <v-autocomplete
          v-model="modelValue"
          :items
          chips
          closable-chips
          multiple
        />
        <v-combobox
          v-model="modelValue"
          :items
          chips
          closable-chips
          multiple
        />
        <v-select
          v-model="modelValue"
          :items
          chips
          closable-chips
          multiple
        />
      </v-form>

      <h1>v-autocomplete[readonly]</h1>
      <v-autocomplete
        v-model="modelValue"
        :items
        chips
        closable-chips
        multiple
        readonly
      />

      <h1>v-combobox[readonly]</h1>
      <v-combobox
        v-model="modelValue"
        :items
        chips
        closable-chips
        multiple
        readonly
      />

      <h1>v-select[readonly]</h1>

      <v-select
        v-model="modelValue"
        :items
        chips
        closable-chips
        multiple
        readonly
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ['a', 'b', 'c', 'd']
  const modelValue = ref(['a', 'c'])
</script>

[J-Sek]

Works, very clean

[J-Sek]

What about disabled?

[Haviles04]

What about disabled?

Disabled already works and prevents it from closing, just looks different

[J-Sek]

disabled still shows x icons that can be focused with [tab] and used with space and enter. Including disabled in the new code, next to readonly feels like a quick win.

[Haviles04]

disabled still shows x icons that can be focused with [tab] and used with space and enter. Including disabled in the new code, next to readonly feels like a quick win.

Nice catch! updated