fix(VField): stopPropagation mousedown event on clearable icon

[yuwu9145]

fixes #16925

Description

fixes #16925

Markup:

<template>
  <v-app>
    <v-main class="pa-8 w-50">
      <v-card color="primary" class="d-flex flex-column w-100" title=":open-on-clear=default">

        <v-autocomplete :items="items" hide-details="auto" v-model="item[0]" :clearable="true" label="autocomplete" />
        <v-select :items="items" hide-details="auto" v-model="item[1]" :clearable="true" label="select" />
        <v-combobox :items="items" hide-details="auto" v-model="item[2]" :clearable="true" label="combobox" />
      </v-card>

      <v-card color="success" class="d-flex flex-column w-100" title=":open-on-clear=true">
        <v-autocomplete :items="items" hide-details="auto" v-model="item[3]" :clearable="true" label="autocomplete"
          :open-on-clear="true" />
        <v-select :items="items" hide-details="auto" v-model="item[4]" :clearable="true" label="select"
          :open-on-clear="true" />
        <v-combobox :items="items" hide-details="auto" v-model="item[5]" :clearable="true" label="combobox"
          :open-on-clear="true" />
      </v-card>

      <v-card color="error" class="d-flex flex-column w-100" title=":open-on-clear=false">
        <v-autocomplete :items="items" hide-details="auto" v-model="item[6]" :clearable="true" label="autocomplete"
          :open-on-clear="false" />
        <v-select :items="items" hide-details="auto" v-model="item[7]" :clearable="true" label="select"
          :open-on-clear="false" />
        <v-combobox :items="items" hide-details="auto" v-model="item[8]" :clearable="true" label="combobox"
          :open-on-clear="false" />
      </v-card>
    </v-main>
  </v-app>
</template>

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

const item = ref([...Array(9).keys()])
const items = ref([1, 2, 3, 4, 5, 6])
</script>

[johnleider]

I changed the implementation logic slightly. In addition to stopping propagation, I prevent default so that when a selects menu is open and cleared, it won't hide the menu then re-open it. I moved the logic to open the menu as a side-effect of the search computed property changing the state of menu into the _search watcher.

Since onClear causes 2 changes: value to null to '', I wait for the nextTick to update the value of cleared so as not to open the menu when open-on-clear is false. Checked clearing each field while not focused, focused, and focused with the menu open.

<template>
  <v-app>
    <v-main class="pa-8 w-50">
      <v-card color="success" class="d-flex flex-column w-100" title=":open-on-clear=true">
        <v-autocomplete
          v-model="item[3]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="autocomplete"
          :open-on-clear="true"
        />
        <v-select
          v-model="item[4]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="select"
          :open-on-clear="true"
        />
        <v-combobox
          v-model="item[5]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="combobox"
          :open-on-clear="true"
        />
      </v-card>

      <v-card color="error" class="d-flex flex-column w-100" title=":open-on-clear=false">
        <v-autocomplete
          v-model="item[6]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="autocomplete"
          :open-on-clear="false"
        />
        <v-select
          v-model="item[7]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="select"
          :open-on-clear="false"
        />
        <v-combobox
          v-model="item[8]"
          :items="items"
          hide-details="auto"
          :clearable="true"
          label="combobox"
          :open-on-clear="false"
        />
      </v-card>
    </v-main>
  </v-app>
</template>

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

  const item = ref([...Array(9).keys()])
  const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
</script>

[yuwu9145]

New implementation works really good, it does resolve the issue. Couple of comments:

• "cleared related" logic is now part of search watcher. For this task, it is obvious to understand the reason behind it. However, in future, when others jumping into this code, it will be hard to understand "why search should have a chance to mutate cleared" ? I personally feel tangling cleared inside search watcher would introduce tech debt in future, because cleared state has no logical/conceptual relation to search change
• I use onInput={ onInput } because it is the same pattern from VAutocomplete. The code in VAutocomplete is much easier to understand and VAutocomplete behaves really well in terms of tackling against this issue. Functions in VAutocomplete do things that are conceptually related so it would be easier to maintain
• v-model also duplicates with onUpdate:modelValue in VCombobox. Maybe already impact fix(VAutocomplete): update search value for mobile #15025, I will verify later

[KaelWD]

VTextField switched to separate prop/event since then (#15907) so it should be fine to revert #15025

[yuwu9145]

@johnleider

I tried/experimented my old solution of using onInput={ onInput } again today.

Since Kael mentioned #15907, it means onInput={ onInput } on Autocomplete should become unnecessary/redundant. Letting v-model drive search.value should be the right direction to go.

Probably we should try to refactor that onInput={ onInput } on Autocomplete sometime later

Thanks for your help! For this issue, I give this PR an approve 👍