fix(inputs): focus on mousedown instead of click (#16568)

vuetifyjs · Feb 8, 2023 · e3e0614 · e3e0614
1 parent e91c191
commit e3e0614
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 21 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -147,7 +147,7 @@ export const VAutocomplete = genericComponent<new <
 
       search.value = ''
     }
-    function onClickControl () {
+    function onMousedownControl () {
       if (
         (props.hideNoData && !items.value.length) ||
         props.readonly || form?.isReadonly.value
@@ -276,8 +276,7 @@ export const VAutocomplete = genericComponent<new <
           appendInnerIcon={ props.menuIcon }
           readonly={ props.readonly }
           onClick:clear={ onClear }
-          onClick:control={ onClickControl }
-          onClick:input={ onClickControl }
+          onMousedown:control={ onMousedownControl }
           onFocus={ () => isFocused.value = true }
           onBlur={ () => isFocused.value = false }
           onKeydown={ onKeydown }

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -188,7 +188,7 @@ export const VCombobox = genericComponent<new <
         menu.value = true
       }
     }
-    function onClickControl () {
+    function onMousedownControl () {
       if (
         (props.hideNoData && !items.value.length) ||
         props.readonly || form?.isReadonly.value
@@ -356,8 +356,7 @@ export const VCombobox = genericComponent<new <
           appendInnerIcon={ props.items.length ? props.menuIcon : undefined }
           readonly={ props.readonly }
           onClick:clear={ onClear }
-          onClick:control={ onClickControl }
-          onClick:input={ onClickControl }
+          onMousedown:control={ onMousedownControl }
           onFocus={ () => isFocused.value = true }
           onBlur={ () => isFocused.value = false }
           onKeydown={ onKeydown }

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -109,7 +109,6 @@ export const VField = genericComponent<new <T>() => {
   },
 
   emits: {
-    'click:control': (e: MouseEvent) => true,
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: any) => true,
   },
@@ -195,8 +194,6 @@ export const VField = genericComponent<new <T>() => {
       if (e.target !== document.activeElement) {
         e.preventDefault()
       }
-
-      emit('click:control', e)
     }
 
     useRender(() => {

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -66,6 +66,7 @@ export const VFileInput = defineComponent({
 
   emits: {
     'click:control': (e: MouseEvent) => true,
+    'mousedown:control': (e: MouseEvent) => true,
     'update:modelValue': (files: File[]) => true,
   },
 
@@ -111,6 +112,9 @@ export const VFileInput = defineComponent({
       callEvent(props['onClick:prepend'], e)
       onControlClick(e)
     }
+    function onControlMousedown (e: MouseEvent) {
+      emit('mousedown:control', e)
+    }
     function onControlClick (e: MouseEvent) {
       inputRef.value?.click()
 
@@ -167,7 +171,8 @@ export const VFileInput = defineComponent({
               <VField
                 ref={ vFieldRef }
                 prepend-icon={ props.prependIcon }
-                onClick:control={ onControlClick }
+                onMousedown={ onControlMousedown }
+                onClick={ onControlClick }
                 onClick:clear={ onClear }
                 onClick:prependInner={ props['onClick:prependInner'] }
                 onClick:appendInner={ props['onClick:appendInner'] }

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -147,7 +147,7 @@ export const VSelect = genericComponent<new <
         menu.value = true
       }
     }
-    function onClickControl () {
+    function onMousedownControl () {
       if (
         (props.hideNoData && !items.value.length) ||
         props.readonly || form?.isReadonly.value
@@ -232,7 +232,7 @@ export const VSelect = genericComponent<new <
           appendInnerIcon={ props.menuIcon }
           readonly
           onClick:clear={ onClear }
-          onClick:control={ onClickControl }
+          onMousedown:control={ onMousedownControl }
           onBlur={ onBlur }
           onKeydown={ onKeydown }
         >

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -64,7 +64,7 @@ export const VTextField = genericComponent<new () => {
 
   emits: {
     'click:control': (e: MouseEvent) => true,
-    'click:input': (e: MouseEvent) => true,
+    'mousedown:control': (e: MouseEvent) => true,
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: string) => true,
   },
@@ -118,6 +118,14 @@ export const VTextField = genericComponent<new () => {
 
       if (!isFocused.value) focus()
     }
+    function onControlMousedown (e: MouseEvent) {
+      emit('mousedown:control', e)
+
+      if (e.target === inputRef.value) return
+
+      onFocus()
+      e.preventDefault()
+    }
     function onControlClick (e: MouseEvent) {
       onFocus()
 
@@ -175,12 +183,8 @@ export const VTextField = genericComponent<new () => {
             }) => (
               <VField
                 ref={ vFieldRef }
-                onMousedown={ (e: MouseEvent) => {
-                  if (e.target === inputRef.value) return
-
-                  e.preventDefault()
-                }}
-                onClick:control={ onControlClick }
+                onMousedown={ onControlMousedown }
+                onClick={ onControlClick }
                 onClick:clear={ onClear }
                 onClick:prependInner={ props['onClick:prependInner'] }
                 onClick:appendInner={ props['onClick:appendInner'] }
@@ -230,7 +234,6 @@ export const VTextField = genericComponent<new () => {
                         { slots.default ? (
                           <div
                             class={ fieldClass }
-                            onClick={ e => emit('click:input', e) }
                             data-no-activator=""
                           >
                             { slots.default() }

diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -59,6 +59,7 @@ export const VTextarea = defineComponent({
 
   emits: {
     'click:control': (e: MouseEvent) => true,
+    'mousedown:control': (e: MouseEvent) => true,
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: string) => true,
   },
@@ -119,6 +120,9 @@ export const VTextarea = defineComponent({
 
       emit('click:control', e)
     }
+    function onControlMousedown (e: MouseEvent) {
+      emit('mousedown:control', e)
+    }
     function onClear (e: MouseEvent) {
       e.stopPropagation()
 
@@ -222,7 +226,8 @@ export const VTextarea = defineComponent({
                 style={{
                   '--v-textarea-control-height': controlHeight.value,
                 }}
-                onClick:control={ onControlClick }
+                onClick={ onControlClick }
+                onMousedown={ onControlMousedown }
                 onClick:clear={ onClear }
                 onClick:prependInner={ props['onClick:prependInner'] }
                 onClick:appendInner={ props['onClick:appendInner'] }