From 9520563d9a4652c7d725c975ef9ac1e3673ceb47 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Sun, 12 May 2024 22:31:46 +1000
Subject: [PATCH] fix(VNumberInput): mobile friendly support (#19791)

---
 .../src/labs/VNumberInput/VNumberInput.tsx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 3fa97c4cf7a..ca1924ed3f2 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -19,7 +19,7 @@ import type { PropType } from 'vue'
 import type { VTextFieldSlots } from '@/components/VTextField/VTextField'
 
 type ControlSlot = {
-  click: () => void
+  click: (e: MouseEvent) => void
 }
 
 type VNumberInputSlots = Omit<VTextFieldSlots, 'default'> & {
@@ -108,11 +108,13 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       }
     }
 
-    function onClickUp () {
+    function onClickUp (e: MouseEvent) {
+      e.stopPropagation()
       toggleUpDown()
     }
 
-    function onClickDown () {
+    function onClickDown (e: MouseEvent) {
+      e.stopPropagation()
       toggleUpDown(false)
     }
 
@@ -143,6 +145,10 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       model.value = v ? +(v) : undefined
     }
 
+    function onControlMousedown (e: MouseEvent) {
+      e.stopPropagation()
+    }
+
     useRender(() => {
       const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props)
 
@@ -162,6 +168,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   size="small"
                   tabindex="-1"
                   onClick={ onClickDown }
+                  onMousedown={ onControlMousedown }
                 />
               ) : (
                 <VDefaultsProvider
@@ -195,6 +202,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   name="increment-btn"
                   icon="$collapse"
                   onClick={ onClickUp }
+                  onMousedown={ onControlMousedown }
                   size="small"
                   tabindex="-1"
                 />
@@ -236,6 +244,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                 tile
                 tabindex="-1"
                 onClick={ onClickUp }
+                onMousedown={ onControlMousedown }
               />
             </div>
           ) : (!props.reverse
@@ -255,6 +264,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                 tile
                 tabindex="-1"
                 onClick={ onClickDown }
+                onMousedown={ onControlMousedown }
               />
 
               <VDivider vertical />
@@ -284,6 +294,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
           ]}
           { ...textFieldProps }
           style={ props.style }
+          inputmode="decimal"
         >
           {{
             ...slots,