fix(VField): stopPropagation mousedown event on clearable icon (#16945)

Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Mar 27, 2023 · 7e7a467 · 7e7a467
1 parent f4f5d7b
commit 7e7a467
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -119,6 +119,7 @@ export const VCombobox = genericComponent<new <
       },
     })
     const selectionIndex = ref(-1)
+    let cleared = false
     const color = computed(() => vTextFieldRef.value?.color)
     const { items, transformIn, transformOut } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(color)
@@ -156,12 +157,19 @@ export const VCombobox = genericComponent<new <
         }
 
         if (!val) selectionIndex.value = -1
-        if (isFocused.value) menu.value = true
 
         isPristine.value = !val
       },
     })
     watch(_search, value => {
+      if (cleared) {
+        // wait for clear to finish, VTextField sets _search to null
+        // then search computed triggers and updates _search to ''
+        nextTick(() => (cleared = false))
+      } else if (isFocused.value && !menu.value) {
+        menu.value = true
+      }
+
       emit('update:search', value)
     })
     watch(model, value => {
@@ -190,6 +198,8 @@ export const VCombobox = genericComponent<new <
     const listRef = ref<VList>()
 
     function onClear (e: MouseEvent) {
+      cleared = true
+
       if (props.openOnClear) {
         menu.value = true
       }

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -291,6 +291,10 @@ export const VField = genericComponent<new <T>() => {
               <div
                 class="v-field__clearable"
                 v-show={ props.dirty }
+                onMousedown={ (e: MouseEvent) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
               >
                 { slots.clear
                   ? slots.clear()